jQuery Mobile- 以编程方式控制 clearBtn

Question

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

每当用户在文本框中键入字符时，一旦输入结束，删除图标就会隐藏文本框中的字符。

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

如果有人遇到过这样的问题，请告诉我。

Answer 1

根据评论更新

我相信发生的事情是 variable/attribute (data) 已更新，但 DOM 未更新。使用 jQuery .on() 方法将 blur 和 focus 事件绑定到元素的 textinput，应该会导致 DOM 到 refresh/re-read 紧接着 处理程序触发。因此，它应该反映在事件处理程序中发生的更改，即对 data 属性的更新。

选项 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

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

我已经设法通过使用 .css("display","none) and .css("visibility","hidden) 在实际 ui-input-clear-hidden class 被应用，后者是最好的，因为它不会删除元素，只会使其不可见。但是，在这两种情况下，它都会影响点击功能。多玩一些可能是可能的……但是，已经过了 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");
});

jQuery Mobile- 以编程方式控制 clearBtn

jQuery Mobile- Control clearBtn programmatically

html

mobile

jquery

inputbox

html5-data

根据评论更新