Как перехватить event.keyCode и заменить его на другой keyCode? - PullRequest
Новая
       5

Как перехватить event.keyCode и заменить его на другой keyCode?

8 голосов
/ 08 января 2012

Я проверил другие вопросы здесь, в SO, но они не отвечают на мой вопрос.Я хочу просто перехватить определенный код ключа и заменить его другим.Я работаю с символами, а не с пробелами, и мне не нужно терять фокус или тому подобное.

Ниже приведен мой код.Но вы можете заменить эти коды клавиш своими (например, когда нажата заглавная буква «А», она должна быть заменена на ноль 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.Они не меняют код клавиши.Как я могу это сделать?

PS Если возможно, я ищу решение, которое не "event.preventDefault () и вручную вставьте нужную клавишу в поле ввода, затем переместите курсор в конец".Я хочу более чистого и "правильного" решения.Спасибо.

Ответы [ 3 ]

8 голосов
/ 08 января 2012

Все свойства событий клавиатуры доступны только для чтения.Вы не можете перехватить один ключевой код и изменить его на другой.

См. Ссылку из MDN - События клавиатуры - Все только для чтения не могут быть установлены.

Как вы упомянули в своем посте.- Если вы не хотите обрабатывать, то вы должны остановить браузер, нажмите клавишу по умолчанию и установите желаемое значение для элемента самостоятельно.

3 голосов
/ 27 мая 2014

Я использую следующий код для достижения того же результата, как если бы я изменил 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 взята из этого ответа по кд7.Я только изменил его, чтобы он получил элемент вместо его 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();
        }
    }
}
0 голосов
/ 23 марта 2019

Хотя свойства в экземпляре KeyboardEvent доступны только для чтения, вы можете переопределить прототип KeyboardEvent и создать метод получения того, что хотите изменить.Вот пример, который изменяет коды клавиш 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
        }
    }
})
...