JavaScript

Question

曾经尝试搜索最有效的方法来覆盖VanillaJS中的默认keydown事件。具体来说，我正在尝试覆盖“退格”键的默认事件，并为其赋予左箭头键的功能。

我通过以下代码找出了如何使用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()是否可能在这里发挥作用？

Answer 1

我不知道这是否是您需要的一切，但是您可以在要触发事件的元素上使用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">

覆盖VanillaJS中的默认keydown事件

1 个答案:

JavaScript

HTML