HTML DOM Textarea readOnly属性


HTML DOM Textarea readOnly Property

HTML DOM Textarea readOnly属性返回并修改HTML文档中文本区域元素的内容是否应为只读。

句法

以下是语法-

1.返回只读

1
object.readOnly

2.添加只读

1
object.readOnly = true | false

让我们看一个HTML DOM Textarea readOnly属性的示例：

例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<style>
 body {
   color: #000;
   background: lightseagreen;
   height: 100vh;
 }
 .btn {
   background: #db133a;
   border: none;
   height: 2rem;
   border-radius: 2px;
   width: 40%;
   display: block;
   color: #fff;
   outline: none;
   cursor: pointer;
 }
</style>
<body>
DOM Textarea readOnly Property Demo
<textarea rows="5" cols='20' name="I'm name attribute of textarea element">
Hi! I'm a text area element with some dummy text.
</textarea>
<button onclick="set()" class="btn">Toggle Read Only</button>

 function set() {
   var ta = document.querySelector("textarea");
   if (ta.readOnly === true) {
    ta.readOnly = false;
   } else {
    ta.readOnly = true;
   }
 }

</body>
</html>

输出量

单击"切换只读"按钮以切换textarea元素的readOnly属性的值。