показывать элемент, если текстовый ввод не является пустым с помощью jQuery

#jquery #textinput #cleartype

#jquery #textinput #cleartype

Вопрос:

Хорошо, итак, я закодировал элемент и тому подобное. Это просто немного странно, поскольку, если форма пуста, кнопка очистки отображается в виде изображения, например: (x)

Вот сценарий, при загрузке страницы jQuery фокусируется на поле ввода текста и одновременно отображает класс (x) clear. Чего я хочу достичь, так это этого.

При загрузке страницы jQuery по-прежнему фокусируется на поле ввода текста, однако он не отображает четкий класс (x), но отобразит его, только если в текстовое поле введен хотя бы 1 символ, в противном случае он не отображается.

вот текущий код

 $(document).ready(function() {
             $('#ui_query').focus();
        });

        $('#ui_query').focus(function() {
             $('.clear-helper').css('opacity','0.9999');
        });

        $(document).focusout(function() {
             $('.clear-helper').css('opacity','0.3333');
        });



        (function ($, undefined) {
        $.fn.clearable = function () {
        var $this = this;
        $this.wrap('<div class="clear-holder" />');
        var helper = $('<span class="clear-helper"></span>');
        $this.parent().append(helper);
        helper.click(function(){
            $this.val("");
            $('#ui_query').focus();
        });
        };      
        })(jQuery);

        $("#ui_query").clearable();
  

Ответ №1:

Вы можете использовать селектор атрибутов attribute-not-equals для назначения входных данных с непустыми значениями:

 $('#ui_query[value!=""]').doSomething();
  

Если вы не хотите, чтобы пробел считался «чем-то», вы можете сделать:

 if($.trim($('#ui_query').val()) !== "") {
    $('.clear-helper').css('opacity','0.9999');
}