码迷,mamicode.com
首页 > Web开发 > 详细

使用js设置input标签只读 readonly 属性

时间:2016-11-16 20:14:12      阅读:462      评论:0      收藏:0      [点我收藏+]

标签:attr   点击   大写   put   readonly   setattr   code   读写   eth   

  先上代码:

<html>

<head>
    <title> test </title>
    <meta charset="utf-8">
</head>
<script language="JavaScript">
    function setReadonly() {
        //document.getElementById("test").setAttribute("readOnly", true);
        document.getElementById("test").readOnly=true;
    }

    function readWrite() {
        //document.getElementById("test").setAttribute("readOnly", false);
        document.getElementById("test").readOnly=false;
    }
    
</script>

<body>
    <form name="addform" id="addform" method="post" action="">
        <input type="text" id="test" >
        <input type="button"  value="只读" onclick="setReadonly();">
        <input type="button"  value="读写" onclick="readWrite();">
    </form>
</body>

</html>

  代码挺简单的,但是这一点代码也有可能达不到预期效果。

  一开始,在readWrite()函数中,我用的是注释掉的那些代码,没有用红色部分代码,结果点击“读写”按钮后,还是不可编辑。于是就改成了红色部分代码,结果再点击“读写”按钮就可以编辑了。

  总结了一下,当达不到预期效果时,可以使用以下几种解决方案:

  1、readonly中 将‘o’改为大写‘O’ ,即将readonly改为readOnly ;

  2、将上述代码中的setReadonly()和readWrite()函数中设置readOnly读写属性的那些代码组合着全试一遍,基本就能达到预期效果了。

使用js设置input标签只读 readonly 属性

标签:attr   点击   大写   put   readonly   setattr   code   读写   eth   

原文地址:http://www.cnblogs.com/jinghun/p/6070612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!