如何在纯javascript中手动触发keypress事件时设置keycode值? [英] how to set keycode value while triggering keypress event manually in pure javascript?

问题描述

我对Javascript还是陌生的，尽管我已经很好地使用了JQuery.但是我找不到更好的文档来做到这一点.仅当我按Enter键时，才需要触发click事件.所以我需要为这种情况编写测试用例.

I am new to Javascript, though i have used JQuery well. But i cant find a better documentation for doing this . The click event need to be triggered only if i press enter key. so i need to write test case for this scenario.

function btnRepeatKeyDownEvent(e){
        if (e.keyCode === 13) {
            this.trigger('click', e);
        }
}

到目前为止，我已经找到了解决方案.

so far i have found this solution.

let keyboardEvent: KeyboardEvent = new KeyboardEvent('keypress', {'key': 'Enter'});
document.dispatchEvent(keyboardEvent);

，但是上面的代码始终将键代码值设置为0.对于查找解决方案，我感到很累.根据MDN，大多数功能已弃用.我需要使此测试用例仅适用于chrome，firefox和IE11 +，而不适用于旧版本的浏览器.请帮助我.

but the above code always give keycode value as 0. i am more tired for finding the solution. As per MDN most of the functionalities are deprecated. i need to made this test case workable in chrome, firefox and IE11+ only not for old browsers.Please help me.

推荐答案

keyCode和其他属性为只读.因此，您可以利用JavaScript的 Object.defineProperties 函数来覆盖值来伪造它:

The keyCode and other properties are Read Only. So, you can fake it, taking advantage of JavaScript's Object.defineProperties function that does overwrite values:

function makeKeyPressEvent(keyName, keyCode, charCode){
    var event = new KeyboardEvent('keypress');
    Object.defineProperties(event, {
        charCode: {value: charCode},
        keyCode: {value: keyCode},
        keyIdentifier: {value: keyName},
        which: {value: keyCode}
    });
    return event;
}

使用方法如下:

window.addEventListener('keypress', function(event){console.log('key pressed!', event.keyIdentifier, event.keyCode, event.charCode, event)}, true);

var enterKeyEvent = makeKeyPressEvent('Enter', 13, 13);

window.dispatchEvent(enterKeyEvent);

这篇关于如何在纯javascript中手动触发keypress事件时设置keycode值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！