1 <html> 2 <head> 3 <title>readonly与focus-blur的区别</title> 4 </head> 5 <body> 6 <input type="text" value="test strings" id="myInput" readOnly="readonly" /> 7 8 </body> 9 </html>
首先，注意readonly的写法，当写在标签属性行时，readonly需要小写才有效。
<html> <head> <title>readonly与focus-blur的区别</title> </head> <body> <input type="text" value="test strings" id="myInput" /> <script> document.getElementById("myInput").readOnly="readonly"; </script> </body> </html>
当在js中设置readonly的值得时候，此时的属性名为readOnly，O字母需要大写才有效
<html> <head> <title>无标题文档</title> </head> <body> <input value="test strings" type="text" id="myInput" /> <script type="text/javascript"> document.getElementById("myInput").onfocus=function() { this.blur(); } </script> </body> </html>
当使用focus-blur方法模拟readonly时候，用户是无法选中文本框中的数据的，也就是无法进行拷贝操作。
总而言之，当我们使用readonly的时候一定要注意什么时候字母O需要大写什么时候需要小写。而设置readonly的属性值与使用事件方法focus-blur的差别在于，是否允许拷贝。