JavaScript 怎样取消 input

在前端开发中，使用 JavaScript 对 input 元素进行操作是常见需求，而取消 input 相关的操作在某些场景下至关重要。这不仅能提升用户体验，还能优化页面性能。

当用户在 input 输入框中输入内容后，有时需要取消输入，将输入框恢复到初始状态。在 JavaScript 中，实现这一功能的方法多样。

最直接的方式是通过获取 input 元素的引用，然后直接修改其 value 属性为空字符串。例如，HTML 中有一个 id 为 myInput 的输入框：<input type="text" id="myInput">。在 JavaScript 里，通过 document.getElementById 方法获取该元素，然后设置 value 属性：const myInput = document.getElementById('myInput'); myInput.value = '';，这样就能瞬间清空输入框的内容，达到取消输入的效果。

对于表单中的多个 input 元素，若要一次性取消所有输入，可以先获取表单元素，再遍历表单中的所有 input 元素，逐个将它们的 value 属性设为空字符串。代码如下：

const myForm = document.getElementById('myForm');
const inputs = myForm.getElementsByTagName('input');
for (let i = 0; i < inputs.length; i++) {
    inputs[i].value = '';
}

还有一种情况，是取消输入框的聚焦状态。当用户输入完成后，不想让输入框继续处于可输入状态，可通过 blur() 方法来实现。如 myInput.blur();，这会使输入框失去焦点，用户不能直接在其中输入内容。

在事件处理中，取消 input 操作也很关键。比如，当用户点击取消按钮时，要执行取消输入的逻辑。可以为取消按钮添加点击事件监听器，在事件处理函数中编写取消输入的代码。如：

<input type="text" id="inputField">
<button id="cancelButton">取消</button>

const cancelButton = document.getElementById('cancelButton');
const inputField = document.getElementById('inputField');
cancelButton.addEventListener('click', function() {
    inputField.value = '';
    inputField.blur();
});

通过上述方法，能灵活运用 JavaScript 实现取消 input 的各种需求，满足不同的业务场景，打造更友好的前端交互界面。