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

最新推荐文章于 2024-05-29 10:28:00 发布

dragoo1

最新推荐文章于 2024-05-29 10:28:00 发布

阅读量2.1k

点赞数 1

分类专栏： javascript 文章标签： js input readonly

javascript 专栏收录该内容

56 篇文章

订阅专栏

本文探讨了在HTML中使用JavaScript控制文本输入框的读写状态时遇到的问题及解决方案。通过调整代码实现方式，确保点击按钮后输入框状态能够正确切换，从只读变为可编辑状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码：

<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读写属性的那些代码组合着全试一遍，基本就能达到预期效果了。

转自：http://www.cnblogs.com/jinghun/p/6070612.html