javascript Internet Explorer 中的只读输入框错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3856266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Readonly input box bug in Internet Explorer
提问by Christian
I've got a strange bug, well, MSIE does.
我有一个奇怪的错误，嗯，MSIE 有。
Seems it is failing on all major MSIE versions: 6, 7, 8 and 9 (!)
似乎它在所有主要的 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>
Let me explain how this system works and what is going wrong.
让我解释一下这个系统是如何工作的以及出了什么问题。
When the user clicks (focuses) the input box, the input box should be made editable (ie, lose readonly flag). Then, when s/he leaves the input box (ie, blur event) some processing is done (not shown in code) and the input box is made readonly.
当用户点击（聚焦）输入框时，输入框应该是可编辑的（即失去只读标志）。然后，当他/她离开输入框（即模糊事件）时，会完成一些处理（未在代码中显示）并使输入框变为只读。
This works like a charm in most browsers (firefox, opera, webkit-based), but not any version of IE (including 9 beta). The problem is that in IE, the user has to click the input box twice.
这在大多数浏览器（firefox、opera、基于 webkit）中都很有效，但不适用于任何版本的 IE（包括 9 beta）。问题是在 IE 中，用户必须单击输入框两次。
At this point, you might ask is the inputbox left readonly the first time? No. I tested it, javascript reports that it is editable.
说到这里，你可能会问是不是第一次输入框是只读的？不，我测试了它，javascript 报告它是可编辑的。
Easy fix, just fire a click event on the input box (to simulate the user's double click behavior), no?
No, .click()and .focus()both failed. No idea why.
简单修复，只需在输入框上触发一个点击事件（以模拟用户的双击行为），不是吗？没有，.click()而且.focus()都失败了。不知道为什么。
Edit:Know that the cursor does show up in the text box, at least visibly.
编辑：知道光标确实出现在文本框中，至少是可见的。
Important:People, please do at least try the code before answering!
重要提示：人们，请在回答之前至少尝试一下代码！
回答by Dr.Molle
I wouldn't say it's a bug. If you change the value, you also remove the current textRange.
我不会说这是一个错误。如果更改该值，也会删除当前的 textRange。
Try test.select(), it should give the cursor back to the input.
尝试test.select()，它应该将光标返回到输入。
test.focus()
will result in a loop that will end in an "not enough memory"-error.
将导致以“内存不足”错误结束的循环。
回答by epascarello
I believe that readonlyshould be readOnly. Seems weird you would toggle this property. You can also try to remove it
我相信readonly应该是readOnly。你会切换这个属性似乎很奇怪。您也可以尝试删除它
jQuery("#foo").removeAttr("readOnly"); //.removeAttr("readonly");
回答by vindex
try this ive just tried that and it works:
试试这个 我刚试过，它的工作原理：
<input type="text" value="empty" id="in" readonly/>
![javascript 在 webview 中捏放大 [Android]](/res/img/loading.gif)