×

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

作者:andy0012019.09.10来源:Web前端之家浏览:3483评论:1
关键词:jsreadonly

在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前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/redond23094809348.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria