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

Posted

技术标签:

【中文标题】通过 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 往往会出现很多错误。这是我个人的经验。

以上是关于通过 IE10 中的 jQuery 在 Textarea 上的 HTML5 占位符属性的主要内容,如果未能解决你的问题,请参考以下文章

在 IE 中的占位符上触发 jQuery 输入事件

为啥 IE 10 拒绝通过 jQuery $.ajax 发送 POST 数据

Internet Explorer (IE) 中的 JQuery 圆角搞砸了

为啥 IE 8 让光标跳到这个 JS 的文本区域的末尾?

IE中的jQuery动画分层问题

jquery中的当前对象值