如何使用 JavaScript 将文本框设为只读答案

【问题标题】：How do you make a text box readonly using JavaScript如何使用 JavaScript 将文本框设为只读
【发布时间】：2014-03-14 20:20:07
【问题描述】：

当使用 JavaScript 单击按钮时，如何创建文本框 readonly？我尝试过不同的脚本，例如：

document.getElementById("text").readonly="on";

但由于 readonly 是一个布尔值，我认为它不起作用。

我会使用document.getElementById 还是别的什么？我可以使用一个脚本以readonly 的形式制作所有文本框，还是每个文本框都需要一个单独的脚本？这可以使用 CSS 完成吗？
谢谢！

【问题讨论】：

【解决方案1】：

document.getElementById("text").readonly='readonly';

Javascript 不使用 on/off，它通常使用 true/false。一些属性如“checked”和“disabled”是字面量开关，如上。

如果您想处理通常使用类名的输入组，请将相同的类应用于您想要影响的那些。

您可以在纯 JavaScript 中执行此操作，但您必须循环遍历这些值：

var fields = document.getElementsByClassName('something');
for(var x=0;x<fields.length;x++) {
     fields[x].setAttribute('readonly','readonly');
}

转向使用 jQuery 有很多好处，因为它可以在一条紧凑的线路中完成：

$('.something').attr('readonly','readonly');

【讨论】：

【解决方案2】：

document.getElementById("text").disabled=true;

【讨论】：

【解决方案3】：

假设您没有使用 text 作为 ID，并且您有多个“文本”类型的 input，您可以使用 this

var inputBoxes = document.querySelectorAll("input[type='text']");
for (i = 0; i < inputBoxes.length; i++)
{
    inputBoxes[i].disabled=true;   
}

正如 SimonSimCity 所述

当您将属性 disabled 设置为 true 时，它不适用于互动不再！提交表单时您不会得到它，并且不触发点击事件。这是设置的区别只读为真。所有有趣的浏览器都支持这两个属性。另见：developer.mozilla.org/en-US/docs/Web/HTML/Element/…

在这种情况下，请使用inputBoxes[i].readOnly=true

【讨论】：

当您将属性disabled 设置为true 时，就无法再进行交互了！提交表单时您不会得到它，并且不会触发点击事件。这是将readonly 设置为true 的区别。所有有趣的浏览器都支持这两个属性。另见：developer.mozilla.org/en-US/docs/Web/HTML/Element/…
你会使用什么 CSS 来消除褪色的外观？
@BunnyMan 使用readOnly 而不是disabled 你不会看到faded的样子