javascript - 使用 javascript 使输入类型=文本禁用或只读

Question

大家好，我尝试将一堆文本输入设为只读或使用JavaScript 禁用 我知道你可以使用只读属性来做到这一点，但我想用 JavaScript 来做到这一点。我的问题是它在外部 JavaScript 文件中不起作用，但当我将它放入 html 文件中时，它在这里可以工作代码

var myInpts=document.querySelectorAll("input[type=text]");
  for(var i=0;i<myInpts.length;i++)myInpts[i].disabled=true;
  alert(myInpts.length);

Answer 1

为 DOMContentLoaded 添加一个事件监听器，这将确保您的代码在 DOM 准备就绪时执行。

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll("input[type='text']").forEach(input => {
    input.disabled = true;
  })
});

<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">

例如，如果您想基于点击进行切换:

const toggleInputs = () =>   document.querySelectorAll("input[type='text']").forEach(input => {
    input.disabled = !input.disabled;
  })

document.addEventListener('DOMContentLoaded', () => {
  toggleInputs();
});

document.querySelector('button').addEventListener('click', () => {
  toggleInputs();
});

<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<button>Toggle</button>