如何禁用 CSS 文本区域

Question

下面是我正在处理的程序中的文本。

<div etype="TEXTAREA" style="width: 923px; position: absolute; left: 1px; top: 192px; " class="draggable ui-draggable" id="Element_5857257">
    <label>Log</label>
    <textarea variable="Log" class="form-control" style="white-space: nowrap; margin-left: 0px; margin-right: -6px; width: 923px; margin-top: 0px; margin-bottom: 0px; height: 364px; " placeholder="Log"></textarea>
</div>

我正在尝试禁用此文本区域并将其设为只读。 我没有使用 CSS 的经验，所以我不确定这是否可行？

Answer 1

像这样

<textarea disabled>
    strings...
</textarea>

在您的示例中，只需向您的 textarea 标签添加disabled属性

Answer 2

HTML 解决方案：

<textarea disabled="true"></textarea>

JavaScript 解决方案：

var textarea = document.getElementsByTagName("textarea");
textarea = textarea[0];
textarea.SetAttribute("disabled", "true");

这是反映OP更新代码的编辑答案：

<script type="text/javascript">
    var textarea = document.querySelector("textarea.form-control");
    textarea.SetAttribute("disabled", "true");
</script>

如果您愿意，您可以复制那部分 JS，并将其放在<body>的末尾。 或者，您可以简单地将disabled添加到 textarea HTML 标记。 如果这仍然不是您期望的解决方案，那么您需要重写您的问题。

Answer 3

MDN 文档： Textarea

两种选择：

禁用：

此布尔属性指示用户无法与控件交互。 （如果未指定此属性，则控件从包含元素继承其设置，例如 ；如果没有设置了 disabled 属性的包含元素，则启用控件。）

只读：

这个布尔属性表示用户不能修改控件的值。 与 disabled 属性不同，readonly 属性不会阻止用户在控件中单击或选择。 只读控件的值仍随表单提交。

使用最适合您的用例的那个。

Answer 4

您不能仅使用 CSS 禁用 textarea，使用 CSS 您可以“绘制”它看起来像禁用：

#myTxtarea:disabled {background-color: #EEEEEE;}

但它仍然可以访问，只是看起来“不同”。