Получить значение по умолчанию для ввода, используя jQuery - PullRequest
17 голосов
/ 04 января 2011
$(".box_yazi2").each(function () {
    var default_value = this.value;
    $(this).css('color', '#555'); // this could be in the style sheet instead
    $(this).focus(function () {
        if (this.value == default_value) {
            this.value = '';
            $(this).css('color', '#000');
        }
    });
    $(this).blur(function () {
        if (this.value == '') {
            $(this).css('color', '#555');
            this.value = default_value;
        }
    });
});

Эта функция значения ввода по умолчанию не работает в FF, но отлично работает в IE и, конечно, сам вход выглядит так:

Ответы [ 6 ]

72 голосов
/ 04 января 2011

Просто используйте свойство defaultValue:

var default_value = $(this).prop("defaultValue");

Или:

var default_value = this.defaultValue;
9 голосов
/ 04 января 2011

Решение довольно простое; у вас есть дополнительный }); в вашем коде (спасибо @ Box9).

Я бы посоветовал вам повторно использовать переменную и не создавать десятки объектов jQuery.

Я изменил ваш пример на background-color, но он будет работать.

$('.box_yazi2').each(function(index, element) {
    var $element = $(element);
    var defaultValue = $element.val();
    $element.css('background-color', '#555555');
    $element.focus(function() {
        var actualValue = $element.val();
        if (actualValue == defaultValue) {
            $element.val('');
            $element.css('background-color', '#3399FF');
        }
    });
    $element.blur(function() {
        var actualValue = $element.val();
        if (!actualValue) {
            $element.val(defaultValue);
            $element.css('background-color', '#555555');
        }
    });
});

демо

2 голосов
/ 15 октября 2012
$('input[type="text"]').focus( function(){
            elementValue = $(this).val();
            $(this).val("");
        });
        $('input[type="text"]').blur( function(){
            if($(this).val() != elementValue && $(this).val() != ""){

            }else{
                $(this).val(elementValue);
            }

        });
1 голос
/ 16 июля 2012

Использование this.defaultValue

Извините за ссылку на w3notcools, http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

1 голос
/ 22 февраля 2011

Я использую следующий код:

    //clear the focused inputs
$('input[type="text"]').focus( function(){
    if( $(this).attr('value') == $(this).attr('defaultValue') ){
        $(this).attr('value', '');
    };
} );
$('input[type="text"]').blur( function(){
    if( $(this).attr('value') == '' ){
        $(this).attr('value', $(this).attr('defaultValue') );
    };
} );
0 голосов
/ 08 марта 2013

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

$('.box_yazi2').each(function() {

$(this).on('focus', function(){

   if($(this).val() == $(this).prop('defaultValue')){

      $(this).val('');
      $(this).css('color', '#000');
    }

});

$(this).on('blur', function(){

   if($(this).val() == ''){

      $(this).val($(this).prop('defaultValue'));
      $(this).css('color', '#000');
   }

});

});
...