如何在 HTML 中的只读输入之间切换

HTML 表单元素有一个 readonly 属性，它可以将输入框设置为只读状态。但是，有时候我们需要在只读状态和可编辑状态之间进行切换。下面介绍几种实现方法。

1. 使用 JavaScript

我们可以使用 JavaScript 监听输入框的双击事件，双击时切换只读状态和可编辑状态。以下是示例代码：

<input type="text" id="myInput" readonly>

<script>
  const input = document.getElementById('myInput');
  input.addEventListener('dblclick', () => {
    input.readOnly = !input.readOnly;
  });
</script>

当用户双击输入框时，JavaScript 会将 readOnly 属性的值从 true 切换为 false，或者从 false 切换为 true。

2. 使用 CSS

我们也可以使用 CSS 来切换只读状态和可编辑状态。这种方法需要在 HTML 中添加一个复选框元素，并使用相邻兄弟选择器来实现样式的切换。

以下是示例代码：

<input type="text" id="myInput" readonly>
<label for="toggle-input">Toggle</label>
<input type="checkbox" id="toggle-input">

<style>
  #myInput {
    pointer-events: none;
  }

  #toggle-input:checked ~ #myInput {
    pointer-events: auto;
  }

  #toggle-input:checked ~ label[for="toggle-input"]::after {
    content: "Read-only";
  }

  label[for="toggle-input"]::after {
    content: "Editable";
    margin-left: 0.5em;
  }
</style>

在上面的代码中，我们使用 pointer-events 属性将 myInput 输入框设置为不可点击，只能读取其内容。通过复选框的选中状态，我们使用相邻兄弟选择器来切换 myInput 的 pointer-events 属性，从而实现只读状态和可编辑状态之间的切换。

此外，我们还使用伪元素 ::after 在标签上显示当前输入框状态的文字。

3. 使用 jQuery

我们也可以使用 jQuery 操作 DOM 来切换输入框的只读状态和可编辑状态。以下是示例代码：

<input type="text" id="myInput" readonly>
<button id="toggle-button">Toggle</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $('#toggle-button').click(() => {
    const input = $('#myInput');
    input.prop('readonly', !input.prop('readonly'));
  });
</script>

在上面的代码中，我们给按钮添加了一个点击事件，当单击按钮时，jQuery 会将输入框的 readonly 属性的值从 true 切换为 false，或者从 false 切换为 true。

以上是三种实现方法，我们可以根据具体需求选择相应的方法。