IE只读文本区域问题
当我动态更改文本区域的“只读”属性时,我在 IE7 和 IE8(但不是其他浏览器)中看到了一个问题。文本区域最初被定义为只读,当用户在文本框内单击时,我将 readOnly 设置为 false。此时,如果我输入任何普通字符,它们不会显示 - 事实上,文本框的行为就像它仍然是只读的(即,箭头键四处移动,按删除键转到上一页,等等。 )
如果我再次在文本区域内单击,则输入正常。
这是说明问题的代码片段:
<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() 。我尝试设置一个计时器来设置只读标志。我尝试过使用 setAttribute()/removeAttribute()。这些方法都没有任何乐趣。
更新
我最终使用了 contentEditable,但仅适用于 IE - 我仍然对 FF 和 Safari/Chrome 使用 readOnly,因为 contentEditable 似乎不适用于这些浏览器。我也得用IE9重新检查一下。
I'm seeing an issue in IE7 and IE8 (but not other browsers) with a textarea when I dynamically change its "readonly" attribute. The textarea is initially defined as being read-only, and when the user clicks inside the textbox I set readOnly to false. At this point, if I type any normal characters, they don't get displayed - in fact, the text box acts like it is still read-only (i.e., arrow keys move around, hitting Delete goes to the previous page, etc.)
If I click inside the textarea again, typing works normally.
Here's a code snippet that illustrates the problem:
<html>
<head></head>
<body>
<textarea id="txt1" onclick="document.getElementById('txt1').readOnly = false" readonly=true>Click in here and try typing.</textarea>
</body>
</html>
I've tried different doctypes. I've tried manually calling focus() and click() in the click handler. I've tried setting a timer to set the readOnly flag. I've tried using setAttribute() / removeAttribute(). No joy with any of those approaches.
Update
I ended up using contentEditable, but only for IE - I'm still using readOnly for FF and Safari/Chrome, because contentEditable seemed to not work for those browsers. I'll have to recheck with IE9, too.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是按预期工作的(微软)。需要单击两次才能开始输入,因为第一次单击时它仍然是只读的,因此该元素不会聚焦。更改只读后,您需要使用 Javascript 将元素聚焦,否则您的用户将必须双击。这是因为 IE 不会聚焦禁用的元素,而 Chrome 会聚焦,即使您无法打字。
编辑以添加解决方案
在这种情况下,IE 似乎不喜欢
.focus();
,但.select();
可以。That's working as intended (by Microsoft). It's going to take two clicks to start typing because on the first click it's still read only, so the element wouldn't focus. You need to either focus the element with Javascript after changing read only, or your users will have to double click. This is because IE doesn't focus the disabled element, Chrome does, even though you can't type.
Edit to add solution
IE doesn't appear to like
.focus();
in this case, but.select();
works.也许我误解了这个问题,但我将 onclick 更改为 onfocus,它似乎工作正常。
(编辑:这只是您的代码片段的直接复制粘贴,没有文档类型或其他任何内容,并在 IE7 中查看。)
Maybe I misunderstood the question, but I changed onclick to onfocus and it seemed to work fine.
(Edit: That's just a straight copy-paste of your snippet, no doctypes or anything else, and viewing in IE7.)