占位符和 IE < 10 个问题

Question

我已经为此工作了很长时间。这是关于 IE 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> 用于执行搜索。