HTML的readonly属性怎么用?

readonly属性是一个布尔属性,可用于指定在input或textarea元素中写入的文本是只读的。这意味着用户不能修改或更改特定元素中已经存在的内容(但是,用户可以对其进行制表、突出显示和复制文本)。而JavaScript可以用来更改只读值并使输入字段可编辑。

readonly 属性指定输入字段为只读,只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

readonly属性可与下面列出的两个元素一起使用:

1、<input>和readonly属性

语法:

<input readonly>

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly属性</title>
		<style>
			body {
				text-align: center
			}
			
			h1,
			h2 {
				color: green;
				font-style: italic;
			}
		</style>
	</head>

	<body>
		<h1>input元素中的readonly属性</h1>
		<form action="">
			Email: <input type="text" name="email"><br> 
			Country: <input type="text" name="country" value="China" readonly><br><br> 
			<input type="submit" value="Submit">
		</form>
	</body>

</html>

效果图:

1.gif

2、<textarea>和readonly属性

语法:

<textarea readonly>

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>readonly属性</title>
		<style> 
            body { 
                text-align:center; 
            } 
            h1, h2 { 
                color:green; 
                font-style:italic; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>textarea元素中的readonly属性</h1> 
        <textarea rows="4" cols="40" readonly>
        不可编辑!这是一段测试文本!这是一段测试文本!这是一段测试文本!
        这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
        </textarea>
        <textarea rows="4" cols="40">
        可编辑!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
        这是一段测试文本!这是一段测试文本!这是一段测试文本!
        </textarea> 
    </body> 
</html>

效果图:

2.gif

readonly属性支持的浏览器如下:

● Apple Safari 1+

● Google Chrome 1+

● Firefox 1+

● Opera 1+

● Internet Explorer 6+

以上就是HTML的readonly属性怎么用?的详细内容,更多请关注web前端其它相关文章!

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏