如何使用JavaScript和jQuery检测大写锁定(大写)是否按下

本文概述

• Javascript方法
• jQuery方法

可惜的是, 当你按下Caps Lock按钮时, 你无法使用Javascript直接进行任何检测, 因为无法检测到。但是, 你仍然可以知道插入的文本是否为大写形式, 以警告用户启用了大写锁定。

对于这两种方法(javascript和jQuery), 如果按下的按钮返回大写字符, 我们将使用以下函数进行处理。

/**
 * Check if the keyevent has been triggered with uppercase.
 *
 * @param {Object} e A keypress event
 * @returns {Boolean} isCapsLock
 */
function isCapsLock(e){
    e = (e) ? e : window.event;

    var charCode = false;
    if (e.which) {
        charCode = e.which;
    } else if (e.keyCode) {
        charCode = e.keyCode;
    }

    var shifton = false;
    if (e.shiftKey) {
        shifton = e.shiftKey;
    } else if (e.modifiers) {
        shifton = !!(e.modifiers & 4);
    }

    if (charCode >= 97 && charCode <= 122 && shifton) {
        return true;
    }

    if (charCode >= 65 && charCode <= 90 && !shifton) {
        return true;
    }

    return false;
}

Javascript方法

isCapsLock方法需要一个由keypress事件创建的事件。使用以下代码来了解在启用Caps Lock时是否生成了事件：

document.getElementById("myCustomId").addEventListener("keypress", function(event){
    if(isCapsLock(event)){
        // Uppercase
    }else{
        // Lowercase
    }
}, false);

玩以下小提琴：

jQuery方法

如前所述, isCapsLock方法仅在按键事件上起作用。使用jQuery的keypress事件：

$("#myCustomId").keypress(function(event){
    if(isCapsLock(event)){
        // Uppercase
    }else{
        // Lowercase
    }
});

玩得开心