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

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>

效果图:

1.gif

以上就是JavaScript如何将readonly属性添加到input标签?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏