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>
效果图:
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>
效果图:
readonly 属性支持的浏览器如下:
● Apple Safari 1+
● Google Chrome 1+
● Firefox 1+
● Opera 1+
● Internet Explorer 6+
来源: http://www.css88.com/qa/html5/1999796.html