JavaScript 禁用输入

在某些情况下，我们可能需要禁用用户在页面中的输入，以防止用户无意中更改或破坏数据。在这种情况下，我们可以使用 JavaScript 禁用输入。

禁用单个输入元素

我们可以使用 disabled 属性禁用单个输入元素，如下所示：

<input type="text" id="myInput">
<button onclick="disableInput()">禁用输入</button>

<script>
function disableInput() {
  // 获取元素
  var input = document.getElementById("myInput");
  
  // 禁用输入
  input.disabled = true;
}
</script>

在上面的示例中，disableInput() 函数通过将 disabled 属性设置为 true 禁用输入元素。

禁用整个表单

我们可以使用 disabled 属性禁用整个表单，如下所示：

<form id="myForm">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <button type="submit">提交</button>
</form>

<button onclick="disableForm()">禁用表单</button>

<script>
function disableForm() {
  // 获取表单
  var form = document.getElementById("myForm");
  
  // 禁用表单内的所有表单元素
  for (var i = 0; i < form.elements.length; i++) {
    form.elements[i].disabled = true;
  }
}
</script>

在上面的示例中，disableForm() 函数使用一个循环来禁用表单内的所有表单元素。

禁用整个页面

我们可以使用 document 对象禁用整个页面上的所有输入元素，如下所示：

<button onclick="disablePage()">禁用页面</button>

<script>
function disablePage() {
  // 禁用页面上的所有输入元素
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = true;
  }
  
  var textareas = document.getElementsByTagName("textarea");
  for (var i = 0; i < textareas.length; i++) {
    textareas[i].disabled = true;
  }
  
  var selects = document.getElementsByTagName("select");
  for (var i = 0; i < selects.length; i++) {
    selects[i].disabled = true;
  }
}
</script>

在上面的示例中，disablePage() 函数使用 getElementsByTagName() 获取所有输入元素并将它们禁用。

使用 JavaScript 禁用输入可以保护页面上的数据以及防止用户不必要的修改。