占位符和 IE < 10 个问题

Posted 2023-03-05

【中文标题】占位符和 IE < 10 个问题

【英文标题】：Placeholder and IE < 10 issues

【发布时间】：2014-02-03 15:12:11

【问题描述】：

我已经为此工作了很长时间。这是关于 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 = "";
        
    

但这实际上并不是一个好的解决方案。 有任何想法吗？ 这真的会帮助我。 我会很高兴的。

【问题讨论】：

有这个问题***.com/questions/15020826/…

始终检查功能支持而不是浏览器及其版本！

@WolleVanillebärLutz 请告诉 OP，如何检查 placeholder 的功能，尤其是当 OP 包含一个库来为所述属性创建功能时。

【参考方案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> 用于执行搜索。

【讨论】：

“我还建议摆脱modernizr并实现自己的......”。为什么？？？尤其是当您发布的链接介绍 Modernzr...

@Adriano - 正如我已经说过的那样：实施这样的库会导致不必要的开销和流量。 我的参考资料（介绍了 Modernizr）很好地描述了现有的检测技术以及modernizr 的工作原理以及为什么您不应该检查特定浏览器。

全功能 modernzr 为 14 KB。您可以自定义下载以仅包含您真正需要的检查。它非常受欢迎，几乎可以肯定每个浏览器在缓存中都有自己的副本。我认为没有一个很好的理由来重新发明***。当然你甚至可以重写你自己的 jQuery 库（或者你使用的任何东西）......

@Adriano - 这不是重新发明***。这是关于了解应用程序的所有内容并避免不必要的开销。我同意不管他是否应该使用modernizr，这不是我的决定。但对我来说，重要的是他了解如何检查此类情况。