HTML 输入和 textarea 元素的条件值（如果 IE8/IE9）

Posted 2023-05-07

【中文标题】HTML 输入和 textarea 元素的条件值（如果 IE8/IE9）

【英文标题】：Conditional value for HTML input and textarea elements (if IE8/IE9)

【发布时间】：2015-02-19 11:02:01

【问题描述】：

html 的input 和textarea 元素的占位符属性非常棒，但它不适用于IE8 或IE9。因此，我正在寻找一种仅在用户从 IE8 或 IE9 浏览时设置 value 属性的方法。

我试过这样的事情：

<textarea name="comment" placeholder="Message"><!--[if lte IE 9]>Message<![endif]-->
</textarea>

但是无论浏览器如何，整个“...！--[if lte IE 9]>...”字符串都会在文本区域中输出。 （我不打算在 IE8/9 中重新创建占位符效果，只需设置值。）

感谢阅读！

【参考方案1】：

与其每次要使用占位符时都编写额外的标记，不如在浏览器本身不支持属性/属性时执行特征检测测试并应用 polyfill。编写这些类型的功能的测试也不难：

"placeholder" in document.createElement("textarea");

如果此表达式的计算结果为 true，则您无需执行额外的工作 - 浏览器支持该属性。如果表达式的计算结果为 false，则您知道您需要扩展原型以添加支持，或加载为您执行此操作的 polyfill。

在网络上粗略搜索会发现Placeholder.js，这应该只需要一个脚本参考。

<textarea placeholder="That's it, done."></textarea>
<script src="assets/js/placeholders.min.js"></script>

从那里看来，您可以就应该支持哪些类型的场景编写更详细的说明，但这对于基本支持不是必需的。

【参考方案2】：

试试这种类型的组合：

<!--[if lte IE 9]><textarea name="comment">Message</textarea><![endif]-->
<!--[if !IE]> --><textarea name="comment" placeholder="Message"></textarea><!-- <![endif]-->

在任何一种情况下都只会出现其中一个。

【讨论】：

感谢您的回复，看起来很棒。我想知道如果用户从 IE 10 到达会发生什么。这两个条件不会都是假的吗？

不，即 10 和更新版本不使用条件 cmets，所以你很好。只有 IE5.5-9 使用 'if not ie' 的东西。

啊，好的，所以 [if !IE] 实际上意味着 [if !IE5.5-9]。谢谢你的解释。

那么lte IE 9 部分有什么意义吗，if IE 不够吗？

你又是对的！我通常使用 lte ie9，所以它易于阅读，但两者是等价的。