如何使网站上的所有文本区域“只读”答案

【问题标题】：How to make all textareas on a website "readonly"如何使网站上的所有文本区域“只读”
【发布时间】：2017-02-16 14:58:55
【问题描述】：

我在我的网站上使用了很多文本区域，但它们不是只读的，并且需要很长时间才能将readonly 属性添加到所有这些区域。有没有其他方法可以将它们全部设为只读？

【问题讨论】：

你试过了吗？如果是，请发表您的努力。
在您的页面上使用无法使用的<textarea> 元素有什么意义？
你需要使用textarea吗？它们通常更适合表单。
你试过什么？你的代码在哪里？请仔细阅读提供minimal reproducible example。
我使用 $('input[type="text"]').each(function(){ $(this).attr('readonly','readonly'); });

标签： javascript html css

【解决方案1】：

您可以 * 使用 JavaScript 选择页面上的所有 textareas 并循环访问集合，将 readonly 属性设置为 true。

/** ES6 VERSION **/
{
  let textareas=document.getElementsByTagName("textarea"),
      x=textareas.length;
  while(x--)
    textareas[x].readOnly=1;
}
/** ES5 VERSION
(function(){
  var textareas=document.getElementsByTagName("textarea"),
      x=textareas.length;
  while(x--)
    textareas[x].readOnly=1;
})();
**/

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

* 我说可以，因为任何人都需要在浏览器中禁用 JavaScript 来解决这个问题。更好的解决方案是在您的代码中“手动”设置每个textarea 的readonly 属性，但是，任何真正想要绕过它的人仍然可以通过他们的浏览器的开发人员来做到这一点。控制台。

【讨论】：

同意。如果要防止数据在提交时发生变化，最好的解决方案是在服务器端处理它。
确实如此。不过，我觉得这超出了问题的范围。但是，如果您认为应该包含它，请随时对其进行编辑。

【解决方案2】：

使用 VanillaJS，您可以使用以下代码：

var list = document.getElementsByTagName("textarea");

for (var i = 0; i < list.length; i++) {
    list[i].readOnly = true;
}

使用 jQuery：

$('textarea').attr('readonly', true);

【讨论】：

【解决方案3】：

您可以在所有 textareas 元素周围放置一个字段集并禁用该字段集：

var myFieldset = document.getElementById("fieldset");
disableAll.onclick = function () { myFieldset.disabled = true; }
enableAll.onclick = function () { myFieldset.disabled = false; }

<button id="disableAll">Disable all</button>
<button id="enableAll">Enable all</button>

<form>
    <fieldset id="fieldset">
        <div>
            <input type="text" value="sample text"/>
        </div>
        <div><textarea>your textarea</textarea></div>
        <div><input type="button" value="a button"/></div>
    </fieldset>
</form>

使用 jQuery 你可以使用类似的东西：

$('input[type=text], textarea').attr('readonly', true);

【讨论】：