jquery - jQuery Mobile- 以编程方式控制 clearBtn

Question

我正在使用 jquery Mobile 1.3.2 版本。我有一个带有 data-clear-btn=true 的文本框。

每当用户在文本框中键入字符时，一旦到达末尾，删除图标就会隐藏文本框中的字符。

一旦用户退出，我想隐藏删除图标。我试过使用 $("#elementId").textinput("option", "clearBtn", false); 但没有运气。它没有隐藏清除按钮。

请让我知道是否有人遇到过此类问题。

Answer 1

根据评论更新

我相信正在发生的事情是变量/属性 ( data) 已更新，但 DOM 未更新。使用 jQuery方法将blur和事件绑定到元素的，应该会导致 DOM在处理程序触发后立即刷新/重新读取。因此，它应该反映在事件处理程序中发生的变化，即对属性的更新。focus.on()textinputdata

选项1：

    $("#elementId").textinput.on("blur", function(){
      $("#elementId").data("clear-btn", false);
    }).on("focus", function(){
      $("#elementId").data("clear-btn", true);
    });

或者以下也可能会起作用：

选项 2：

    $("#elementId").textinput.on("blur", function(){
      $("#elementId").attr("data-clear-btn", false);
    }).on("focus", function(){
      $("#elementId").attr("data-clear-btn", true);
    });

但是如果你想最严格地遵守 jQuery 和 HTML5/canvas，你应该使用选项 #1

UPDATE## Heading ## 我尝试了各种变体 - 某些东西正在重置 CSS，inputbox以便ui-input-clear-hidden始终再次应用。jQuery Mobile javascript 使用它来确定它是否可见......而不是data-clear-btn值。

我已经设法在应用实际类的地方同时使用 .css("display","none) 和 .css("visibility","hidden) 来解决这个问题ui-input-clear-hidden，后者最好是因为它没有删除元素，只会使其不可见。但是，在这两种情况下，它都会影响点击功能。多玩一些可能是可能的……但是，已经过了 2 个小时……我不能再花时间在上面了。祝你好运。

$("#elementId").on("blur", function(){

$("#elementId").data("clear-btn", false);
console.log(
    $("#elementId")
    .data("clear-btn")
);
$("#console").append(
    $("#elementId")
    .data("clear-btn").toString() + "</br>"
);

$("#elementId")
    .parent()
    .children("a")
    .addClass(
        "ui-input-clear-hidden"
    );
$("#console").append(
    $("#elementId")
    .parent()
    .children("a")
    .attr("class") + "</br>"
);  
$("#elementId")
    .parent()
    .children("a")
    .css("visibility","hidden")
;



}).on("focus", function(){

$("#elementId").data("clear-btn", true);
$("#elementId")
    .parent()
    .children("a")
    .removeClass(
        "ui-input-clear-hidden"
    );
console.log(
    $("#elementId")
    .data("clear-btn")
);
$("#console").append(
    $("#elementId")
    .parent()
    .children("a")
    .attr("class") + "</br>"
);      
$("#console").append(
    $("#elementId")
    .data("clear-btn").toString() + "</br>"
);
$("#elementId")
    .parent()
    .children("a")
    .css("visibility","visible")
;

});

Answer 2

通过添加css，我没有隐藏控制按钮，而是将删除图标移到了文本框之外，这样用户就可以看到文本框内的内容。

$(".ui-input-clear").each(function(element){
            $(this).css("right","-32px");
});