使用jQuery获取输入的默认值答案

【问题标题】：Get default value of an input using jQuery使用jQuery获取输入的默认值
【发布时间】：2011-06-03 06:37:22
【问题描述】：

$(".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中完全可以当然，输入本身看起来像这样：

<input type="text" class="box_yazi2" id="konu" name="konu" value="Boş" />

【问题讨论】：

你为什么不用this.defaultValue？
最后一行是一组额外的});。这只是错误地复制粘贴吗？
@venom 好吧，它适用于 Fx here。
Firebug 是否会返回某种错误？另外，如果您只是想完成这项工作（而不是出于学习目的）：mucur.name/system/jquery_example
@Box9 是的）它是 document.ready 中的最后一个函数））@jensgram 我会试试 thx

标签： javascript jquery html input default-value

【解决方案1】：

只需使用defaultValue 属性：

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

或者：

var default_value = this.defaultValue;

【讨论】：

你应该详细说明你的例子。目前没有属性defaultValue
defaultValue 是一个可通过 JavaScript 访问的内置属性。对于 input[type=text]，它包含输入元素的原始值...加载页面时存在的值。
不错！我不知道。此属性是否以这种方式被广泛支持/访问？
@crazy：见Interface HTMLInputElement as described in DOM level 2 specs 和HTMLInputElement on MDN。其他有趣的属性是 defaultChecked 和 defaultSelected 用于选择元素内的单选/复选框和选项。
HTML 中的属性和属性之间存在差异。要获取 defaultValue 或 defaultChecked，我们应该使用 .prop() 方法。 jQuery.com 上有一个很好的解释：api.jquery.com/prop

【解决方案2】：

解决方法很简单；你的代码中有一个额外的});（感谢@ 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');
        }
    });
});

demo

【讨论】：

【解决方案3】：

$('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);
            }

        });

【讨论】：

【解决方案4】：

我正在使用下一个代码：

    //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') );
    };
} );

【讨论】：

你不应该使用.attr('value', ...) 而应该使用.val(...) 来改变元素的值！

【解决方案5】：

使用this.defaultValue

很抱歉链接到 w3notcools，http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

【讨论】：

w3schools 是horrible resource。更好的参考是developer.mozilla.org/en-US/docs/DOM/…
ThiefMaster，感谢 w3schools，我学到了很多东西，我无法分享您对它是“可怕的资源”的看法。仅仅因为有比提到的网站更好，更详细或更高级的资源，它并不会使一个“可怕”。此外，他们与 W3C 没有任何关系，或者有人创建了一个网站来抨击他们——这并不意味着他们的“可怕性”。说实话 - W3C 自己有太多糟糕的解决方案/决定，以至于他们是最后一个抨击其他人/公司的人。
@userfuser meta.stackexchange.com/questions/87678/…

【解决方案6】：

说实话，你应该使用 prop 而不是这么多函数，使用 'delegate' 而不是 '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');
   }

});

});

【讨论】：