如何用JavaScript捕获number类型input的空格键事件并重置值为0

你遇到的问题很常见——onchange事件只有在输入框失去焦点或者值发生实质性修改时才会触发，而空格键在number类型的输入框里并不会改变输入值（因为number输入不允许空格字符），所以onchange根本不会响应这个操作。

要实现按下空格键就重置输入值的需求，我们需要直接监听键盘事件，比如keydown或者keyup，具体实现如下：

<html>
<head>
<script type="text/javascript">
function handleSpaceKey(event, inputElement) {
    // 判断是否按下的是空格键
    if (event.key === ' ') {
        // 阻止默认行为，避免页面滚动等干扰
        event.preventDefault();
        // 重置输入框的值为0.00，保持你原来的格式
        inputElement.value = "0.00";
        // 可选：手动触发change事件，如果你有依赖onchange的其他逻辑
        inputElement.dispatchEvent(new Event('change'));
    }
}
</script>
</head>
<body>
<!-- 改用onkeydown事件，传递event和当前input元素 -->
<input type="number" value="0.00" class="no-spin" onkeydown='handleSpaceKey(event, this)' />
</body>
</html>

关键细节说明： #

• 我们用event.key === ' '来判断空格键，这比旧的keyCode === 32更直观且兼容性更好。
• 调用event.preventDefault()是为了避免浏览器在输入框聚焦时按下空格触发页面滚动的默认行为。
• 如果你的业务逻辑里还有依赖onchange的操作，可以通过dispatchEvent手动触发该事件，确保后续流程正常执行。

另外，如果你更喜欢用事件监听的方式（将JS与HTML分离，更符合现代前端代码组织习惯），也可以这样写：

<html>
<head>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
    const numberInput = document.querySelector('input[type="number"]');
    numberInput.addEventListener('keydown', function(event) {
        if (event.key === ' ') {
            event.preventDefault();
            this.value = "0.00";
            this.dispatchEvent(new Event('change'));
        }
    });
});
</script>
</head>
<body>
<input type="number" value="0.00" class="no-spin" />
</body>
</html>

内容的提问来源于stack exchange，提问作者Dekso