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

Question

我正在进行表单(输入字段)验证。

Problem - IE浏览器(8-9)将占位符文本作为值，在验证期间它接受相同的值，但是它应该被视为一个空值。我不想使用任何脚本，为了实现它，我想出了下面的功能。还有人能进一步提高这个功能的可用性/范围吗？目前，每次用户输入该值时，它都使输入字段为空白。但是，当占位符默认文本生效时，我希望它第一次验证。有什么建议吗？

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

Answer 1

placeholder在< IE 9中造成问题，所以您可以使用数据()

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

Answer 2

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

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();