JavaScript实现Input时间格式控制的keypress与keydown区别

Input时间格式控制方案概述

本文通过具体实例介绍如何使用JavaScript控制Input输入框的时间格式，供读者参考。

此前曾尝试通过keydown和keyup事件实现时间格式控制，但代码逻辑较为复杂且存在缺陷。

近日深入研究了keypress事件与keydown、keyup的区别，主要差异如下（基于当前认知）：

keydown、keyup与keypress事件差异分析

keydown事件在按键按下时触发，可通过event对象获取keyCode，此时能读取文本框输入前的值。

keyup事件在按键松开时触发，同样可通过event对象获取keyCode，此时能读取文本框输入后的值。

keypress事件在Chrome和IE浏览器中行为基本一致，但在Firefox浏览器中存在差异。

1、在Chrome和IE中：仅当按下的键能在文本框中显示字符时触发（如字母、数字、符号等），可通过event获取keyCode；event.key属性为undefined；若按键不产生字符（如方向键、Home、Backspace等）则不触发。

2、在Firefox中：字母、数字、符号、方向键、退格键等均能触发该事件，可通过event.key获取按键名称；若按键能输出字符，则event.keyCode为0；若不能输出字符，则event.keyCode为对应的ASCII码。

回到主题，先直接查看相关代码（上述提到的event对应代码中的参数e）：

var isFF = /firefox/i.test(navigator.userAgent);
$("input").on({
keyup : function (e) {
/^[\d:]+$/.test(e.target.value) && (e.target.value = "");
    },
keypress : function (e) {
if (isFF && e.keyCode !== 0) {
/// 在火狐中按任意键都会触发keypress事件，而在IE/Chrome中只有按下能输出字符的按键才会触发
/// 针对火狐，e.keyCode!==0则按下了退格、方向、Home等按键之一
} else {
if (e.target.value.length > 7)
return false;
if (/\d{2}$/.test(e.target.value)) {
e.target.value += ':';
            }
var char = String.fromCharCode(e.keyCode === 0 ? e.which : e.keyCode);
if (!/^\d/.test(char))
return false;
        }
    }
});

通过判断isFF && e.keyCode !== 0来区分Firefox中能输出字符的按键与不能输出字符的按键。由于Firefox中e.keyCode可能无法正确取值，因此改用e.which替代。

keyup事件用于处理使用输入法时可能输入中文或字母的问题。

利用String.fromCharCode()函数将ASCII码转换为对应字符。

希望本文所述内容对大家的javascript程序设计有所帮助。