Question

我一直在为此工作很长一段时间。这是关于IE＆lt; 10上的placeholder问题。我在这里看到了很多，但我觉得这个案子很奇怪。为了解决我的这个问题，我正在使用placeholder.js。所以我的第一个问题是，我有一个<input type="text" id="textbox1" placeholder="My Text"/>和一个下拉列表。当我从下拉列表中选择任何一个时，它应该更改它所做的占位符。因此，我的下拉列表中的选项是a, b, c。如果我首先选择b/c然后单击搜索按钮（不键入文本框），搜索将起作用，并且不会清除占位符。但是，如果我选择a，占位符文本将会消失。如果单击文本框，它将再次显示。然后选择b/c将具有相同的行为。

我的第二个问题是提交时没有在搜索框中输入任何内容。占位符文本将被视为文本，然后将是搜索词。这是一个常见问题。我不知道为什么我使用的polyfill无法解决这个问题，或者我应该做的不仅仅是包括placeholder.js？所以我在search（）函数中所做的就是这样：

    if($.browser.msie && $.browser.version < 10.0){
        if($("#textbox").val() == $("#textbox" + s).attr("placeholder")){
            text = "";
        }
    }

但这实际上并不是一个好的解决方案。有任何想法吗？这真的对我很有帮助。我很乐意欣赏它。

Answer 1

推荐

首先，我建议你不要使用 placeholder.js。没有理由使用它。实现这样的库将导致不必要的开销和流量。

我还建议您检查功能支持，而不是浏览器及其版本！因此，我还建议您远离modernizr并实施自己的简短检查以获得功能支持。 Why should you do this?和 How to use this techniques bulletproof?

因此，不要像modernizr这样实现，而是编写自己的小javascript类来检查支持。你可以这样做：

window.Compatibility = {
  Placeholder: function () {
    return 'placeholder' in document.createElement('input');
  }
};

清洁解决方案

在您的情况下，检查浏览器是否支持输入元素的占位符属性。如果不是这种情况，您可以实现其他回退逻辑：

window.Search = {
  Placeholder: 'this is the default placeholder text',
  Execute: function (pattern) {
    // Implement your search logic here!
  }
};

$('#executesearch').click(function() {
  var searchpattern = $('#searchpattern').val();
  if(!Compatibility.Placeholder){
      if (searchpattern === Search.Placeholder)
        return false;
  }

  Search.Execute(searchpattern);
}

我假设您有一个<input id=searchpattern type=text>，您可以在其中输入搜索关键字和<input id=executesearch type=button>来执行搜索。

占位符和IE＆lt; 10个问题

1 个答案:

推荐

清洁解决方案