JavaScript如何将readonly属性添加到input标签

作者：andy0012019.09.10来源：Web前端之家浏览：11758评论:1

关键词：js readonly

在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>

预览看下效果吧。

赏您的支持是我们创作的动力！