如何使用JavaScript只读文本框

Question

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

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

但由于readonly是布尔我不认为它有效。

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

Answer 1

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

Answer 2

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

Javascript没有使用开/关，它通常使用true / false。一些属性，如＆＃34;已检查＆＃34;并且＆＃34;禁用＆＃34;是文字开关，如上所述。

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

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

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

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

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

Answer 3

假设您没有使用text作为ID，并且您有多个input类型＆＃39;文字＆＃39;，则可以使用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