javascript - 占位符和 IE < 10 个问题

Question

我已经为此工作了很长一段时间了。这是关于placeholder IE <10 上的问题。我在这里看到了很多这样的事情，但我只是觉得这个案子有些奇怪。为了解决我的这个问题，我使用 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>用于执行搜索。