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

时间 2019-11-30

标签页面文本只读属性 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须要小写才有效。javascript

<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

<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时候，用户是没法选中文本框中的数据的，也就是没法进行拷贝操做。java

总而言之，当咱们使用readonly的时候必定要注意何时字母O须要大写何时须要小写。而设置readonly的属性值与使用事件方法focus-blur的差异在于，是否容许拷贝。this