文本输入和键盘事件


浏览器有三个传统的键盘事件,较低级的 keydownkeyup 和较高级的 keypress 事件,keypress 事件表示产生一个可打印字符:

JavaScript 键盘事件

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';
    }
});

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

如上所述,键盘事件包含 keydownkeyupkeypress。所有键盘事件对象都有数字属性 keyCode,用于指定按下的是哪个键。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 拖放事件

>> 下一篇: 使用 XMLHttpRequest(一):发送请求获取响应