文本输入和键盘事件

浏览器有三个传统的键盘事件，较低级的 keydown、keyup 和较高级的 keypress 事件，keypress 事件表示产生一个可打印字符：

3 级 DOM 事件规范草案定义了一个更通用的 textinput 事件，不管来源，无论何时用户输入文本时都会触发它，但目前该事件尚未得到支持，但 Webkit 浏览器支持一个非常类似的「textInput」事件。

/**
 * InputFilter.js: 过滤<input>元素的键盘输入
 */
whenReady(function () {
    // 查找所有 <input> 元素
    var inputelts = document.getElementsByTagName("input");
    for (var i = 0; i < inputelts.length; i++) {
        var elt = inputelts[i];
        if (elt.type !== "text" || !elt.hasAttribute("data-allowed-chars")) {
            continue;
        }
        // 在 <input> 元素上注册事件处理函数
        if (elt.addEventListener) {
            elt.addEventListener("keypress", filter, false);
            elt.addEventListener("textinput", filter, false);
            elt.addEventListener("textInput", filter, false);
        } else {
            elt.attachEvent("onkeypress", filter);
        }
    }
    
    // 用于过滤用户输入的事件处理程序
    function filter(event) {
        var e = event || window.event;
        var target = e.target || e.srcElement;
        var text = null;
    
        // 获取用户输入文本
        if (e.type === "textinput" || e.type === "textInput")
            text = e.data;
        else {  // keypress 事件
            // Firefox 用 charCode，其他浏览器用 keyCode
            var code = e.charCode || e.keyCode;
            if (code < 32 ||              // ASCII控制符
                e.charCode === 0 ||       // 功能键（Firefox）
                e.ctrlKey || e.altKey)     // 辅助键
                    return;               // 不过滤
    
            text = String.fromCharCode(code);  // 将字符编码转化为字符串
        }
    
        // 现在需要从input元素中查找需要的信息
        var allowed = target.getAttribute("data-allowed-chars");
        var messageid = target.getAttribute("data-messageid");
        if (messageid)
            var messageElement = document.getElementById(messageid);
    
        // 遍历输入文本中的字符
        for (var i = 0; i < text.length; i++) {
            var c = text.charAt(i);
            if (allowed.indexOf(c) === -1) {   // 针对不合法元素的处理
                if (messageElement)
                    messageElement.style.visibility = 'visible';
                // 取消默认行为，所以不插入文本
                if (e.preventDefault)
                    e.preventDefault();
                if (e.returnValue)
                    e.returnValue = false;
                return false;
            }
        }
    
        // 如果所有字符合法，隐藏存在的消息元素
        if (messageElement)
            messageElement.style.visibility = 'hidden';
    }
});

注：keypress 和 textinput 事件都是在输入文本真正插入到聚焦文档元素前触发。此外，浏览器也实现了在文本插入到元素后触发的事件 input，可用于文本输入后的处理。

如上所述，键盘事件包含 keydown、keyup 和 keypress。所有键盘事件对象都有数字属性 keyCode，用于指定按下的是哪个键。