Переопределить событие keydown по умолчанию в VanillaJS - PullRequest
Новая
       7

Переопределить событие keydown по умолчанию в VanillaJS

0 голосов
/ 26 января 2019

Пытался найти наиболее эффективный способ переопределения события нажатия клавиши по умолчанию в VanillaJS. В частности, в моем случае я пытаюсь переопределить событие по умолчанию клавиши «backspace» и назначить ему функцию клавиши со стрелкой влево.

Я понял, как использовать event.preventDefault(), чтобы остановить событие по умолчанию, с помощью этого кода: 

document.querySelector(/* Target selector */).onkeydown = checkKey;

function checkKey(event) {
    let which = event.which;
    let keyCode = event.keyCode;
    let charCode = event.charCode;
    if(which == 8 || keyCode == 8 || charCode == 8) {
        event.preventDefault();
    }
}

Но я не могу назначить новое событие. Я работал с чем-то в этом направлении, но у меня такое чувство, что я далеко: 

document.querySelector('#blank-page').onkeydown = checkKey;

function checkKey(event) {
    let which = event.which;
    let keyCode = event.keyCode;
    let charCode = event.charCode;
    if(which == 8 || keyCode == 8 || charCode == 8) {
        which == 37;
        keyCode == 37;
        charCode == 37;
    }
}

Может ли createEvent() войти в игру здесь?

1 Ответ

0 голосов
/ 26 января 2019

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

Вы можете использовать его следующим образом:

JavaScript 

window.onload = function(){
   document.querySelector('#my-input').onkeydown = checkKey;
}


function checkKey(event) {
    console.log(event);
    let which = event.which;
    let keyCode = event.keyCode;
    let charCode = event.charCode;

    if(which == 8 || keyCode == 8 || charCode == 8) {
        console.log(event.target);
        //dispatch a keydown event on the input element where the Backspace key was pressed. 
        event.target.dispatchEvent(new KeyboardEvent('keydown', {'keyCode': 37, 'key': 'ArrowLeft', 'code': 'ArrowLeft'})); 
    }else if(keyCode == 37){
        //Added this if statement to check that the ArrowLeft keydown event was dispatched. 
        console.log(event);
    }
}

HTML 

 <input type="text" value="" id="my-input" name="my-input">
...