IE 只读 textarea 问题答案

【问题标题】：IE readonly textarea problemIE 只读 textarea 问题
【发布时间】：2011-04-15 10:24:12
【问题描述】：

当我动态更改其“只读”属性时，我在 IE7 和 IE8（但不是其他浏览器）中看到一个带有 textarea 的问题。 textarea 最初被定义为只读的，当用户在文本框内单击时，我将 readOnly 设置为 false。此时，如果我键入任何普通字符，它们不会显示 - 事实上，文本框的行为就像它仍然是只读的（即，箭头键四处移动，点击 Delete 转到上一页等。 )

如果我再次在文本区域内单击，输入正常。

这是一个说明问题的代码 sn-p：

<html>
<head></head>
<body>
    <textarea id="txt1" onclick="document.getElementById('txt1').readOnly = false" readonly=true>Click in here and try typing.</textarea>
</body>
</html>

我尝试了不同的文档类型。我已经尝试在点击处理程序中手动调用 focus() 和 click() 。我尝试设置一个计时器来设置 readOnly 标志。我试过使用 setAttribute()/removeAttribute()。对这些方法都不满意。

更新

我最终使用了 contentEditable，但仅适用于 IE - 我仍在为 FF 和 Safari/Chrome 使用 readOnly，因为 contentEditable 似乎不适用于这些浏览器。我也得重新检查一下 IE9。

【问题讨论】：

标签： internet-explorer textarea readonly

【解决方案1】：

按预期工作（由 Microsoft 提供）。需要单击两次才能开始输入，因为在第一次单击时它仍然是只读的，因此元素不会聚焦。您需要在更改只读后使用 Javascript 聚焦元素，否则您的用户将不得不双击。这是因为 IE 不会关注禁用的元素，Chrome 会关注，即使您无法输入。

编辑以添加解决方案

在这种情况下，IE 似乎不喜欢 .focus();，但 .select(); 可以。

document.getElementById('yourTextareaId').onclick = function() {
    this.readOnly = false;
    this.select();
}

【讨论】：

谢谢。 select() 有效，但对于我的特定应用程序而言，它并不理想，因为此时键入任何内容都会替换现有内容。理想情况下，用户在文本中单击的位置成为插入点，因此他们开始输入的任何内容都会出现在那里。
我并不是说不可能跨浏览器工作，但这肯定会非常非常困难。

【解决方案2】：

也许我误解了这个问题，但我将 onclick 更改为 onfocus，它似乎工作正常。

（编辑：这只是您的 sn-p 的直接复制粘贴，没有 doctypes 或其他任何内容，并在 IE7 中查看。）

【讨论】：

奇怪 - 使用 onfocus 对我来说效果不一致，我无法弄清楚它什么时候可以工作，什么时候不可以工作的模式。它在 IE8 上也完全不起作用。不过，感谢您查看！