为何限制number输入长度时return false有效而return无效？

核心原因在于浏览器对DOM事件处理函数返回值的规则：

• 当事件处理函数返回false时，浏览器会取消当前事件的默认行为（这里就是阻止把按键对应的字符输入到框里），同时还会阻止事件冒泡。
• 而只写return的话，相当于返回undefined，浏览器会把这个值判定为“允许执行默认行为”，所以依然会把新输入的字符加到框里，自然达不到限制长度的效果。

对应到你的场景：当输入框里已经有1位数字时，return false直接告诉浏览器“别执行这次按键的输入操作”，后续按键就不会被录入；但return没传递这个“阻止”信号，浏览器还是会正常处理输入，所以限制失效。

完整代码示例 #

CSS（移除数字输入框默认箭头）

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox 适配 */
input[type=number] {
  appearance: textfield;
}

HTML（两种处理方式对比）

<!-- 有效：长度为1时阻止继续输入 -->
<input type="number" onkeypress="if(this.value.length===1){return false}">    
<!-- 无效：长度为1时仍能输入更多字符 -->
<input type="number" onkeypress="if(this.value.length===1){return}">    

额外补充：onkeypress对删除键、方向键这类非字符按键不会触发，要是想做更周全的限制，还可以结合input事件监听，或者用JS手动设置输入框的最大长度逻辑，但你当前用return false的方案在目标场景里是完全可行的。

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