Internet Explorer 中的只读输入框错误答案

【问题标题】：Readonly input box bug in Internet ExplorerInternet Explorer 中的只读输入框错误
【发布时间】：2010-10-04 14:39:32
【问题描述】：

我有一个奇怪的错误，嗯，MSIE 有。

似乎在所有主要的 MSIE 版本上都失败了：6、7、8 和 9（！）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" ><head><title>test</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
   jQuery(document).ready(function(){
    var test=jQuery('#in');
    test.focus(function(){
     if(test.val()=='empty')test.val('');
     test.attr('readonly',false);
    });
    test.blur(function(){
     if(test.val()=='')test.val('empty');
     test.attr('readonly',true);
    });
   });
  </script>

</head><body>

  <input type="text" value="empty" readonly="readonly" id="in"/>

</body></html>

让我解释一下这个系统是如何工作的以及出了什么问题。

当用户点击（聚焦）输入框时，输入框应该是可编辑的（即丢失只读标志）。然后，当他/她离开输入框（即模糊事件）时，会进行一些处理（代码中未显示），并将输入框设为只读。

这在大多数浏览器（firefox、opera、基于 webkit）中就像一个魅力，但不是任何版本的 IE（包括 9 beta）。问题是在IE中，用户必须点击输入框两次。

此时，你可能会问，输入框是第一次只读吗？不。我测试过，javascript 报告它是可编辑的。

简单的解决方法，只需在输入框上触发一个点击事件（模拟用户的双击行为），不是吗？不，.click() 和 .focus() 都失败了。不知道为什么。

编辑：知道光标确实出现在文本框中，至少是可见的。

重要提示：各位，请在回答之前至少尝试一下代码！

【问题讨论】：

如果点击使其可编辑，为什么要让它成为只读？
那几乎不是一个解决方案，也不是一个建设性的答案。
这就是为什么它是评论而不是答案。
@meager - 原来是多么阳光明媚的一天！你不同意吗？

标签： javascript jquery internet-explorer

【解决方案1】：

我不会说这是一个错误。如果更改值，也会删除当前的 textRange。

试试test.select()，它应该让光标回到输入。

test.focus()

将导致一个以“内存不足”错误结束的循环。

【讨论】：

您好！我会尽快尝试的。但是，我确实成功地使用了 .focus()，因为我没有收到这样的错误。但正如我所说，它没有用。哦，这很重要，知道光标实际上是在输入框内，至少可见。（已编辑问题）
test.select() 解决了这个问题，谢谢！但test.focus() 没有。

【解决方案2】：

我认为readonly 应该是readOnly。似乎很奇怪你会切换这个属性。您也可以尝试删除它

jQuery("#foo").removeAttr("readOnly"); //.removeAttr("readonly");

【讨论】：

嗯？它是“只读” MSIE 似乎将其更改为“只读”，但它也同样有效。此外，这已经不是我的问题了。

【解决方案3】：

试试这个，我刚试过，它有效：

<input type="text" value="empty" id="in" readonly/>

【讨论】：