如果处理字符串值的文本区域是只读的，如何使用 JavaScript 在虚拟键盘上使用 CAPSLOCK 功能

how can i use capslock function on a virtual keyboard using javascript if the textarea that handles the string value is readOnly?

本文关键字：键盘 虚拟 JavaScript 功能 CAPSLOCK 何使用 字符串 处理 文本 区域 只读      更新时间：2023-09-26

>我使用了这段代码，但它只检测Capslock是打开还是关闭。

$(function () {
        var isShiftPressed = false;
        var isCapsOn = null;
        $("#txtName").bind("keydown", function (e) {
            var keyCode = e.keyCode ? e.keyCode : e.which;
            if (keyCode == 16) {
                isShiftPressed = true;
            }
        });
        $("#txtName").bind("keyup", function (e) {
            var keyCode = e.keyCode ? e.keyCode : e.which;
            if (keyCode == 16) {
                isShiftPressed = false;
            }
            if (keyCode == 20) {
                if (isCapsOn == true) {
                    isCapsOn = false;

                    $("#error").hide();
                } else if (isCapsOn == false) {
                    isCapsOn = true;
                    $("#error").show(); 
                }
            }
        });
        $("#txtName").bind("keypress", function (e) {
            var keyCode = e.keyCode ? e.keyCode : e.which;
            if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
                isCapsOn = true;
                $("#error").show();
            } else {
                $("#error").hide();
            }
        });
    });

但是，如果保存值的文本区域处于只读状态，则此功能不起作用。我该如何解决它？

替换

$("#txtName")

跟 

$('body')

您可以使用onkeypress而不是onkeydown。 后者仅检测按下了哪个键;前者（即使与直觉相反，它的名字包括"按键"）会给你字符。 此链接详细解释： http://unixpapa.com/js/key.html 请注意，并非所有浏览器都支持 onkeypress。

此外，用于将 charcode 转换为 char 的代码效率低下，并且您正在将大写 charcode 转换为小写字符。 下面是一些侦听按键的代码，并在每次按键上提醒用户按下了哪个字符。

    document.onkeypress = function(event){
        event = event || window.event; 
        var key = event.keyCode;
        alert(String.fromCharCode(key));
    }

if (event.keyCode == "65"){
                        document.getElementById("txtInput").value+=val1;
                        btnA.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "66"){
                        document.getElementById("txtInput").value+="b";
                        btnB.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "67"){
                        document.getElementById("txtInput").value+="c";
                        btnC.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "68"){
                        document.getElementById("txtInput").value+="d";
                        btnD.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "69"){
                        document.getElementById("txtInput").value+="e";
                        btnE.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "70"){
                        document.getElementById("txtInput").value+="f";
                        btnF.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "71"){
                        document.getElementById("txtInput").value+="g";
                        btnG.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "72"){
                        document.getElementById("txtInput").value+="h";
                        btnH.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "73"){
                        document.getElementById("txtInput").value+="i";
                        btnI.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "74"){
                        document.getElementById("txtInput").value+="j";
                        btnJ.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "75"){
                        document.getElementById("txtInput").value+="k";
                        btnK.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "76"){
                        document.getElementById("txtInput").value+="l";
                        btnL.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "77"){
                        document.getElementById("txtInput").value+="m";
                        btnM.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "78"){
                        document.getElementById("txtInput").value+="n";
                        btnN.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "79"){
                        document.getElementById("txtInput").value+="o";
                        btnO.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "80"){
                        document.getElementById("txtInput").value+="p";
                        btnP.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "81"){
                        document.getElementById("txtInput").value+="q";
                        btnQ.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "82"){
                        document.getElementById("txtInput").value+="r";
                        btnR.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "83"){
                        document.getElementById("txtInput").value+="s";
                        btnS.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "84"){
                        document.getElementById("txtInput").value+="t";
                        btnT.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "85"){
                        document.getElementById("txtInput").value+="u";
                        btnU.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "86"){
                        document.getElementById("txtInput").value+="v";
                        btnV.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "87"){
                        document.getElementById("txtInput").value+="w";
                        btnW.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "88"){
                        document.getElementById("txtInput").value+="x";
                        btnX.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "89"){
                        document.getElementById("txtInput").value+="y";
                        btnY.style.backgroundColor="#00bfff";
                    }
                    if (event.keyCode == "90"){
                        document.getElementById("txtInput").value+="z";
                        btnZ.style.backgroundColor="#00bfff";
                    }

这是我使用的代码，所以当我在键盘上按 A-Z 时，文本区域中会有 A-Z。但即使大写锁定在 ON 它仍然是小写的。

相关文章：