页面文本框的只读属性readonly的设置与使用focus-blur事件方法的区别 

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的差别在于，是否允许拷贝。

posted @ 2013-12-10 11:19  Arvin-wjw  阅读(1482)  评论(0)  编辑  收藏  举报