jQuery Mobile- управление clearBtn программно

Question

Я использую версию jquery Mobile 1.3.2. У меня есть текстовое поле с data-clear-btn=true.

Всякий раз, когда пользователь печатает символы в текстовом поле, как только он достигает конца, значок удаления скрывает символы в текстовом поле.

Я хотел бы скрыть значок удаления, как только пользователь уйдет. Я пытался использовать $("#elementId"). Textinput("option", "clearBtn", false); но не повезло. Он не скрывает кнопку очистки.

Пожалуйста, дайте мне знать, если кто-нибудь сталкивался с такой проблемой.

Answer 1

Вместо того, чтобы скрывать кнопку управления, добавив css, я переместил значок удаления за пределы текстового поля, что позволяет пользователю видеть содержимое внутри текстового поля.

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

Answer 2

ОБНОВЛЕНИЕ на основе комментариев

Я считаю, что происходит то, что переменная / атрибут (data) обновляется, но DOM нет. Связывание blur а также focus события с использованием JQuery .on() метод к элементу 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, вам, вероятно, следует использовать опцию #1

ОБНОВЛЕНИЕ ## Заголовок ## Я пробовал различные варианты - что-то сбрасывает 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")
;

});