jQuery удаляет текст onfocus

Question

jQuery удаляет текст onfocus

Я пытался иметь значение по умолчанию во вводе текста, затем с jQuery, когда Вы "onfocus" текстовое поле, он делает текст черным (примите значение по умолчанию светло-серый), и удаляет значение по умолчанию. Я думаю, что Вы знаете то, о чем я говорю, Вы знаете, как выполнить это?

5

jquery text

задан Brian Tompsett - 汤莱恩 6 July 2015 в 18:34

4 ответа

$('input:text').bind({
    focus: function () {
        var self = $(this);

        if (self.val() == self.attr('defaultValue')) {
            self.val('').removeClass('default');
        };
    },
    blur: function () {
        var self = $(this),
            val = jQuery.trim(self.val());

        if (val == "" || val == self.attr('defaultValue')) {
          self.val(self.attr('defaultValue')).addClass('default');  
        };
    }
}).trigger('blur');

Используйте класс CSS по умолчанию , который устанавливает любой цвет текста по вашему желанию.

Пример использования: http://www.jsfiddle.net/2S9hW/

1

ответ дан 13 December 2019 в 19:24

Вы в основном создаете то, что поддерживает атрибут placeholder текстового элемента HTML5. Поэтому вам следует просто использовать атрибут placeholder, а затем проверить, поддерживает ли браузер функцию заполнителя:

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}
if (!support_input_placeholder()) {
    $(':text').focus(function(){
        var self = $(this);
        if (self.val() == self.attr('placeholder')) {
            self.val('');
        }
    }).blur(function(){
        var self = $(this),
            value = $.trim(self.val());
        if(val == '') {
            self.val(self.attr('placeholder');
        }
    });
}

<input type="text" name="desc" placeholder="My Email Account">

0

ответ дан 13 December 2019 в 19:24

Плагин водяных знаков jquery позволяет добиться желаемого эффекта.

2

ответ дан 13 December 2019 в 19:24

Другие вопросы по тегам:

jquery text

Похожие вопросы:

score 7 · Accepted Answer

<input class="txtClass" type="text" defaultVal="Enter your Name" />
<input class="txtClass" type="text" defaultVal="Enter your Designation" />

javascript

$('body').ready(function(){
  $('.txtClass').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'grey'});
      });

  $('.txtClass').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'black'});
    }
    });
  $('.txtClass').blur(function(){
    if ( $(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'grey'});
    }
    });
});

See working example: ~~http://jsbin.com/ovida3~~
http://jsbin.com/ovida3/2