IE浏览器中的占位符文本问题(8-9)答案

【问题标题】：Placeholder text issue in IE browsers(8-9)IE浏览器中的占位符文本问题(8-9)
【发布时间】：2013-11-25 22:49:26
【问题描述】：

我正在处理表单（输入字段）验证。

问题 - IE 浏览器 (8-9) 将占位符文本视为值，并且在验证期间它接受相同的值，但应将其视为空值。我不想使用任何脚本并实现它，我想出了以下功能。任何人都可以稍微提高功能的可用性/范围。目前，每次用户输入值时，它都会使输入字段为空白。但是，我希望它在占位符默认文本生效时首次验证。有什么建议吗？

HTML

<input type="text" name="memberid" id="memberid" placeholder="Some Value" />
<a href="#" class="alpha-btn" id="search-btn">Search</a>

jQuery

$('#search-btn').on('click', function(){
    if($.browser.msie){
        $('input').each(function() {
            var theAttribute = $(this).attr('placeholder');
            if (theAttribute) {
                $(this).val('');
                alert('Please enter value - IE');
            }
        });
    }
});

【问题讨论】：

伙计，我不想为此使用任何脚本。如果您有任何解决方案，除了...请
老兄，您已经正在为此使用脚本。您发布的代码是一个脚本。我链接到的第三方代码与您的代码完全相同，但没有错误。
:-) 这多有趣.. 不是提供解决方案，而是指出愚蠢的事情.. 我的意思是我不希望在我的代码中添加任何第三方脚本.. 想要使用我的功能实现它..如果你能增强..它会有所帮助..否则非常感谢你的时间。

标签： javascript jquery html internet-explorer placeholder

【解决方案1】：

placeholder 在< IE 9 中产生问题，因此您可以像使用data() 一样

HTML

<input type="text" name="memberid" id="memberid" data-placeholder="Some Value" placeholder="Some Value"/>

脚本

$('#search-btn').on('click', function(){
    if($.browser.msie){
        $('input').each(function() {
            var theAttribute = $(this).data('placeholder');
            if (theAttribute == this.value) {// check placeholder and value
                $(this).val('');
                alert('Please enter value - IE');
            }
        });
    }
});

【讨论】：

#Roshan 谢谢。这工作正常。问题，当用户在这种情况下输入默认占位符文本作为值（即“某些值”）时，它会失败..任何解决方案？
#Bug 在这种情况下是 fails 而不是 valid too

【解决方案2】：

我认为实现您想要做的最好的方法是为 IE8 和 IE9 中的占位符构建一个完整的解决方案。为此，我建议使用Modernizr 和输入占位符功能 检测。所以，你可以使用这样的函数：

window.ie8ie9placeholders = function() {
  if (!Modernizr.input.placeholder) {
    return $("input").each(function(index, element) {
      if ($(element).val() === "" && $(element).attr("placeholder") !== "") {
        $(element).val($(element).attr("placeholder"));
        $(element).focus(function() {
          if ($(element).val() === $(element).attr("placeholder")) {
            return $(element).val("");
          }
        });
        return $(element).blur(function() {
          if ($(element).val() === "") {
            return $(element).val($(element).attr("placeholder"));
          }
        });
      }
    });
  }
};

这将为 IE8 和 IE9 启用占位符。您需要做的就是在初始化代码时使用它。

ie8ie9placeholders();

【讨论】：