当字段为空时，val() 返回占位符值而不是 IE8,9 中的实际值答案

【问题标题】：val() returns Placeholder value instead of the actual value in IE8,9 when the field is empty当字段为空时，val() 返回占位符值而不是 IE8,9 中的实际值
【发布时间】：2012-06-26 13:30:34
【问题描述】：

下面显示的占位符属性在 Firefox 中可以正常工作，但如果在字段为 empty 时调用 val()，它会返回占位符值而不是文本中的实际值。

JSFiddle - http://jsfiddle.net/Jrfwr/2/

<input id="tlt" type="text" placeholder="Enter Title" />

JS代码

function placeHolderFallBack() {
   if ("placeholder" in document.createElement("input")) {
       return;
   }
   else {
       $('[placeholder]').focus(function () {
           var input = $(this);
           if (input.val() == input.attr('placeholder')) {
               input.val('');
               input.removeClass('placeholder');
           }
       }).blur(function () {
           var input = $(this);
           if (input.val() == '' || input.val() == input.attr('placeholder')) {
               input.addClass('placeholder');
               input.val(input.attr('placeholder'));
           }
       }).blur();
       $('[placeholder]').parents('form').submit(function () {
           $(this).find('[placeholder]').each(function () {
               var input = $(this);
               if (input.val() == input.attr('placeholder')) {
                   input.val('');
               }
           })
       });
   }
}

【问题讨论】：

还有什么问题？

标签： javascript jquery

【解决方案1】：

您可以覆盖 val() 方法，但我不喜欢这样做：D

我写了一个简单的 pVal() 函数来完成这项工作

$.fn.pVal = function(){
    var $this = $(this),
        val = $this.eq(0).val();
    if(val == $this.attr('placeholder'))
        return '';
    else
        return val;
}
$(function(){
    alert($('input').val())
    alert($('input').pVal())
});

http://jsfiddle.net/W7JKt/3/

【讨论】：

如果有人决定写占位符所说的内容怎么办？
然后它被替换了。或者你认为它可能有用吗？只要您选择了一个好的占位符文本，它就不应该发生
我只是认为这是一个可能发生的问题，对我来说并不那么重要这里。但这只是我的观点，我对这个问题没有任何兴趣。

【解决方案2】：

在您的 JSFiddle 代码中，您可以在 BUTTON CLICK 事件中获取文本框的值...并且检查文本框的当前值是否等于占位符的代码在 FORM SUBMIT 事件中执行。

所以...问题是 BUTTON 的 CLICK 事件在 FORM 的 SUBMIT 事件之前执行。

This code shows an example of how to get the correct value

希望对您有所帮助。

【讨论】：

【解决方案3】：

它与 HTML 5 有关。请参阅这篇文章。

http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

【讨论】：