javascript如何设置input不可编辑

这篇文章主要讲解了“javascript如何设置input不可编辑”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript如何设置input不可编辑”吧！

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了玛沁免费建站欢迎大家使用！

方法：1、利用disabled属性设置，语法为“元素对象.disabled = true”；2、利用setAttribute()方法和readOnly属性设置，语法为“元素对象.setAttribute("readOnly",true)”。

本教程操作环境：windows10系统、javascript1.8.5版、Dell G3电脑。

javascript怎么设置input不可编辑

有两种方法设置input不可编辑。

1、利用disabled属性

disabled 属性是一个布尔属性。

disabled 属性规定应该禁用的 <input> 元素。

被禁用的 input 元素是无法使用和无法点击的。

2、利用readonly属性和setAttribute方法

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

setAttribute()方法用于增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值

语法为：

elementNode.setAttribute(name,value)

示例如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<input id="txt" type="text" >
    <input id="btn1" type="button" value="利用disabled不可编辑">
<input id="txt1" type="text" >
    <input id="btn2" type="button" value="利用readOnly不可编辑">
 <script> 
        var btn1 = document.getElementById('btn1');
        btn1.onclick = function () {
            var txt = document.getElementById('txt');
            txt.disabled = true;
        }
        var btn1 = document.getElementById('btn2');
        btn1.onclick = function () {
            var txt = document.getElementById('txt1');
            txt.setAttribute("readOnly", true);
        }
    </script>
</body>
</html>

输出结果：

javascript如何设置input不可编辑

感谢各位的阅读，以上就是“javascript如何设置input不可编辑”的内容了，经过本文的学习后，相信大家对javascript如何设置input不可编辑这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章名称：javascript如何设置input不可编辑
文章网址：https://www.cdcxhl.com/article12/jhdsdc.html

成都网站建设公司_创新互联，为您提供云服务器、关键词优化、品牌网站设计、网站改版、小程序开发、手机网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容