IE 只读 textarea 问题
Posted
技术标签:
【中文标题】IE 只读 textarea 问题【英文标题】：IE readonly textarea problem 【发布时间】：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。
【问题讨论】：
【参考方案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 上也完全不起作用。不过，感谢您查看！以上是关于IE 只读 textarea 问题的主要内容，如果未能解决你的问题，请参考以下文章
React textarea with value 是只读的，但需要更新
Qt5.8 QML 为啥只读的 Controls2.TextArea 有 ibeam 光标？