使用js动态改变input的只读属性

谨月之十

于 2019-12-06 14:29:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web技术文章标签： js input 只读属性动态设置

本文链接：https://blog.youkuaiyun.com/LZL52DM/article/details/103421932

web技术专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript动态地更改HTML中input元素的只读属性。通过一个示例，展示了如何在用户触发事件（如点击按钮）时，使原本只读的输入框变为可编辑状态，并提供了实现这一功能的具体代码。

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

使用js动态改变input的只读属性

写一个网页需要动态改变input的只读属性，看了很多博客改了很多次代码但没报错也没实现功能。写个博客记录一下。

在input标签里设置只读属性，

<input type="text" value="sdfds" class="collage" readonly="true"/>

然后通过点击事件动态的改变只读属性。

<label style="float:right;" οnclick="change(this)">修改</label>

js函数实现（主要看倒数第二条语句）

function change(label)
   {
    var val=label.innerHTML;
    var parentid=label.parentNode.id;<!--获取父元素的id-->
    var parent=document.getElementById(parentid);
    var inputs=parent.getElementsByTagName("input");<!--得到三个input-->
    if(val=="修改")
    {
     
     var i;
     for(i=0;i<inputs.length;i++)
     {
      inputs[i].readOnly=false;
     }
     label.innerHTML="完成";
    }

注意这里的“readOnly”的O是大写的！而在标签中的“o”是小写的！