如何捕获 event.keyCode 并将其更改为另一个 keyCode？

Question

我已经在 SO 检查了其他问题，但是他们没有回答我的问题。我想简单地捕获某些 keyCode 并将其替换为另一个。我正在处理字符，而不是空白，并且我不需要失去焦点等。

下面是我的代码。但是您可以将这些键码替换为您的键码（例如，当按下大写“A”时，它应该替换为零 0 等）。这个想法是替换 keyCode。

phrase.keypress(function(event)
{
    if (event.shiftKey)
    {
        switch (event.keyCode)
        {
            // Cyrillic capitalized "Н" was pressed
            case 1053: event.keyCode = 1187; event.charCode = 1187; event.which = 1187; break;
            // Cyrillic capitalized "О" was pressed
            case 1054: event.keyCode = 1257; event.charCode = 1257; event.which = 1257; break;
            // Cyrillic capitalized "У" was pressed
            case 1059: event.keyCode = 1199; event.charCode = 1199; event.which = 1199; break;
        }
    }
});

我也尝试过使用 keydown 和 keyup。他们不会改变 keyCode。我怎样才能做到这一点？

PS 如果可能，我正在寻找一种不“event.preventDefault() 并手动将所需的键插入输入字段，然后将光标移动到末尾”的解决方案。我想要更清洁和“正确”的解决方案。谢谢。

Answer 1

键盘事件属性都是只读的。您无法捕获一个键码并将其更改为另一键码。

请参阅 MDN 的参考 - 键盘事件 - 全部都是只读的，无法设置。

正如您在帖子中提到的。 -- 如果你不想处理，那么你必须停止浏览器默认按键并自己为元素设置所需的值。

Answer 2

虽然 KeyboardEvent 实例上的属性是只读的，但您可以覆盖 KeyboardEvent 的原型并为您想要更改的任何内容创建 getter。下面是一个示例，它将 hjkl 的键码更改为箭头键。

Object.defineProperty(KeyboardEvent.prototype, 'keyCode', {
    get: function() {
        switch (this.key) {
            case 'h': return 37; // left
            case 'j': return 40; // down
            case 'k': return 38; // up
            case 'l': return 39; // right
            default: return this.which
        }
    }
})

Answer 3

我使用以下代码来实现与更改 keyCode 相同的结果，但实际上无法更改它。

function inputValidation() {
    var srcField = event.srcElement;
    var sKey = event.keyCode;
    var inputLetter = String.fromCharCode(sKey);
    if (typeof(srcField) !== "undefined" && srcField !== null) {
        inputLetter = transformInput(inputLetter);
        var caretPos = srcField.selectionStart;
        var startString = srcField.value.slice(0, srcField.selectionStart);
        var endString = srcField.value.slice(srcField.selectionEnd, srcField.value.length);
        srcField.value = startString + inputLetter + endString;
        setCaretPosition(srcField, caretPos+1); // '+1' puts the caret after the input
        event.preventDefault ? event.preventDefault() : event.returnValue = false; //for IE8
   }
}

srcField.selectionStart 给出您所选文本的起始位置，srcField.selectionEnd 给出所选内容的结束位置（如果您尚未选择任何文本）srcField.selectionStart 等于srcField.selectionEnd。

函数 setCaretPosition 来自 kd7 的这个答案。我只是更改它以使其接收元素而不是其 Id

function setCaretPosition(elem, caretPos) {
    if (elem != null) {
        if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else {
            if (elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            } else
                elem.focus();
        }
    }
}

Answer 4

您可以将值更改为手动并处理按键。如果您想检查密钥，请声明一个变量并检查您的密钥代码。

this.event.target.value = this.event.target.value + ".";
return false;

完整代码：

function isNumberKeyDec(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var apos = 0;
    if (charCode == 44) {
        apos = 1;
        charCode = 46;
    }
    if (this.event.target.value.length == 0 && charCode == 46) {
        return false;
    }
    if (this.event.target.value.length == 1 && this.event.target.value == "0" && charCode == 48) {
        return false;
    }
    if (this.event.target.value.length == 1 && this.event.target.value == "0" && charCode != 46) {
        this.event.target.value = "";
    }    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) {

        return false;
    }
    if (charCode == 46 && this.event.target.value.indexOf(".") != -1) {
        return false;
    }
    if (this.event.target.value.indexOf(".") != -1) {
        if (this.event.target.value.substring(this.event.target.value.toString().indexOf(".")).length >= 2) {
            return false;
        }        
    }
    if (this.event.target.value.indexOf(".") == -1 && charCode != 46) {
        if (this.event.target.value.length >= 3 && charCode != 46) {
            return false;
        }
    }
    if (apos == 1) {
        this.event.target.value = this.event.target.value + ".";
        return false;
    }
    return true;
}