通过 IE10 中的 jQuery 在 Textarea 上的 HTML5 占位符属性

Posted 2023-03-05

【中文标题】通过 IE10 中的 jQuery 在 Textarea 上的 HTML5 占位符属性

【英文标题】：HTML5 Placeholder Attribute on Textarea via jQuery in IE10

【发布时间】：2012-11-25 17:18:24

【问题描述】：

我想知道 Internet Explorer 10 中的一些奇怪行为。 在我的页面上，我添加了一个带有 jquery 的文本区域，包括一个占位符属性。像这样的：

$('body').append($('<textarea placeholder="Placeholder..."></textarea>'));

占位符属性通常在 IE10 中工作得非常好……除了这种情况。我用这个小提琴页面上已经存在的元素对其进行了测试：

http://jsfiddle.net/Aqnt5/1/

如您所见，一个 textarea（动态添加的）将占位符属性视为实际值 - 我能想象到的最烦人的行为...

有谁知道这种效果，也许还有一种解决方法？提前致谢！

编辑

我也刚刚意识到它可以按预期工作，在您手动删除该值之后。您也可以通过jQuery.val('') 将其删除以使其正常工作。我真的对这种行为感到困惑......但这应该是一个合适的“解决方法”。 看到这个小提琴：http://jsfiddle.net/Aqnt5/5/

【问题讨论】：

我刚刚在这里发布了一个类似的问题：***.com/questions/23375208/…。如果您更新 jQuery 到版本 > 1.8.3，问题就会消失。

【参考方案1】：

不幸的是，我没有 IE10 来测试它，但这适用于其他任何地方；

$('body').append('<textarea></textarea>');
$('textarea').attr('placeholder', 'placeholder');

只需仔细检查您的 DOCTYPE 是否适用于 html5

这是一个你也可以做的单行（这里分成几行以使其更明显） -

$('body')
    .append('<textarea></textarea>')
    .find('textarea')
    .attr('placeholder', 'placeholder');

【讨论】：

谢谢杰！之后设置占位符的方式在 IE10 中运行良好。此外，我通过使用 jQuery 删除值找到了另一种解决方法（请参阅我的答案）。

【参考方案2】：

小提琴：http://jsfiddle.net/Aqnt5/5/

您可以使用 jQuery 删除该值，以使其正常运行：

$('body').append($('<textarea placeholder="Placeholder..."></textarea>').val(''));

我不知道他们为什么首先将占位符作为一个值...

【讨论】：

不建议这样做。即使它有效，@Jay Blanchard 的回答也是正确的方法。

【参考方案3】：

我在使用 jQuery 1.8.3: http://jsfiddle.net/wE577/1/ 时看到了同样的情况。

但是如果你使用更高的版本，问题就消失了：http://jsfiddle.net/wE577/2/。

我不知道 jQuery 是如何导致这个错误的，但更新修复了它。

【参考方案4】：

placeholder是HTML5的保留属性， 由于尚未定义 HTML5（并且可能会发生更改）， 那么并不是所有的浏览器都支持所有的功能（别让我开始介绍 IE）

供参考： http://www.w3schools.com/html5/att_textarea_placeholder.asp

【讨论】：

感谢痴呆症。我知道与 IE 不兼容 - 不过，占位符属性在大多数情况下都适用于 IE10。只是，当我通过 jQuery 插入它时，它没有得到正确处理。我想知道究竟是什么造成了不同......

当您尝试做一些“捷径”时，IE 往往会出现很多错误。这是我个人的经验。