HTML的readonly属性怎么用？

最新推荐文章于 2023-11-27 00:00:32 发布

weixin_45587319

最新推荐文章于 2023-11-27 00:00:32 发布

阅读量9.8k

点赞数 2

分类专栏： HTML 文章标签： HTML

原文链接：https://www.html.cn/qa/html5/10297.html

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

readonly属性是一个布尔属性，可用于指定在input或textarea元素中写入的文本是只读的。这意味着用户不能修改或更改特定元素中已经存在的内容（但是，用户可以对其进行制表、突出显示和复制文本）。而JavaScript可以用来更改只读值并使输入字段可编辑。
在这里插入图片描述
readonly 属性指定输入字段为只读，只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

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

1、和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>

效果图：
在这里插入图片描述

2、和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>

效果图：
在这里插入图片描述

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

●　Apple Safari 1+

●　Google Chrome 1+

●　Firefox 1+

●　Opera 1+

●　Internet Explorer 6+
推荐阅读：

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML的readonly属性怎么用？

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

扫一扫