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

最新推荐文章于 2024-04-24 12:00:00 发布

weixin_30551947

最新推荐文章于 2024-04-24 12:00:00 发布

阅读量348

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Arvin-wjw/p/3467114.html

版权

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

转载于:https://www.cnblogs.com/Arvin-wjw/p/3467114.html

weixin_30551947

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面文本框的只读属性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="myI...
复制链接

扫一扫