jQuery Mobile- 以编程方式控制 clearBtn答案

【问题标题】：jQuery Mobile- Control clearBtn programmaticallyjQuery Mobile- 以编程方式控制 clearBtn
【发布时间】：2015-11-20 05:38:59
【问题描述】：

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

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

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

如果有人遇到过此类问题，请告诉我。

【问题讨论】：

我用更多细节/稍微不同的方法更新了下面的答案..你看到了吗？试试看告诉我

标签： jquery html mobile inputbox html5-data

【解决方案1】：

基于 cmets 的更新

我相信正在发生的事情是变量/属性 (data) 已更新，但 DOM 未更新。使用 jQuery .on() 方法将 blur 和 focus 事件绑定到元素的 textinput，应该会导致 DOM 在处理程序触发后立即刷新/重新读取。因此，它应该反映发生在事件处理程序内的更改，即对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，您可能应该使用 option #1

更新##标题## 我尝试了各种变体 - 正在重置 inputbox 的 CSS，以便始终再次应用 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")
;

});

【讨论】：

我试过用这个。它在调试窗口中显示为 false。但它不会在文本框中隐藏删除图标。 $("#elmentId").on("focusout", function (e) { $(this).attr("data-clear-btn", false); });
@VenkataRatnam 我更新了答案...让我知道它是否有效
感谢您抽出宝贵时间。

【解决方案2】：

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

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

【讨论】：