使用JavaScript在input标签中添加readonly属性

最新推荐文章于 2024-05-20 15:59:22 发布

qq_43067585

最新推荐文章于 2024-05-20 15:59:22 发布

阅读量4.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

原文链接：https://www.html.cn/qa/javascript/10298.html

版权

JavaScript 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

JavaScript如何将readonly属性添加到input标签？下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法，希望对大家有所帮助。

在JavaScript中可以使用setAttribute()方法将readonly属性添加到表单的input字段中。

setAttribute()方法可将已定义的属性添加到元素，并为其提供定义的值。如果指定的属性已经存在，则正在设置或更改该值。

语法：

element.setAttribute( attributeName, attributeValue )

参数：

●　attributeName：指定要添加的属性的名称；这是必需参数，不可省略。

●　attributeValue：指定要添加的属性的值；这是必需参数，不可省略。

示例：在此示例中，通过访问属性启用表单input文本字段的readonly属性。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>向input标签添加readonly属性</title> 
    </head> 
    <body style = "text-align:center;">  
        <p style = "font-size: 15px; font-weight: bold;">单击按钮，将readonly属性添加到input框中。</p> 
          
        <form> 
            Input : <input id = "Input" type="text"
                name="input_field" /> 
        </form> 
        <br> 
          
        <button onclick = "GFG_Run()"> 点击这里</button> 
          
        <p id = "GFG_down" style =  
            "color: green; font-size: 20px; font-weight: bold;"> 
        </p> 
          
        <script> 
            function GFG_Run() { 
                document.getElementById('Input').readOnly 
                        = true; 
                  
                document.getElementById("GFG_down").innerHTML 
                        = "Read-Only属性已启用"; 
            } 
        </script>  
    </body>  
</html>

效果图：

更多web前端知识，请查阅 HTML中文网！！

qq_43067585

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript在input标签中添加readonly属性

JavaScript如何将readonly属性添加到input标签？下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法，希望对大家有所帮助。在JavaScript中可以使用setAttribute()方法将readonly属性添加到表单的input字段中。setAttribute()方法可将已定义的属性添加到元素，并为其提供定义的值。如果指定的属性已经存在，则正在设置或更改该值。语法：element.setAttribute( att
复制链接

扫一扫

专栏目录