JavaScript事件函数中使用return的原因解析（附按键验证示例）

HTML代码 #

<input type="text" onkeypress="return isNumberKey(evt)" />

JavaScript代码 #

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

提问内容 #

• 为何在onKeypress事件中要使用return？
• 该函数仅返回true/false而非具体值，是如何强制输入框只接收数字的？

问题解答 #

1. 为什么onKeypress事件里要加return？

浏览器的keypress事件自带默认行为：按下字符键时，会把对应字符插入输入框。在事件处理函数前加return，是把函数的返回值传递给浏览器的事件机制——返回false时，浏览器会取消该事件的默认行为，不会把字符输入进去；返回true则允许执行默认行为，让字符正常输入。

要是不加return，不管函数返回什么，浏览器都会执行默认的输入动作，这个限制函数就完全起不到作用。

2. 返回true/false怎么控制输入？

这个函数的核心是判断按键对应的字符编码：

• 数字键的编码是48-57（对应0-9），46是小数点编码，31以下是退格、回车这类控制键
• 如果按下的键不在允许范围内，函数返回false，浏览器直接拦截这个按键的输入行为，字符不会出现在输入框；
• 如果是允许的键，返回true，浏览器就正常执行输入操作，把字符显示出来。

本质是通过返回值告诉浏览器“要不要执行这次按键的默认输入动作”，不是用返回值替换输入内容，而是直接拦截不符合要求的输入行为。

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