按键功能在 JavaScript 中不起作用

Question

我正在尝试并且必须用JavaScriptkeypress字母"A"。 在下面的代码中，有一个alert('hello')框，指示代码正在执行。

但是此代码不会为"登录电子邮件"输入(即文本框(设置任何值。

代码可能有什么问题？

function presskey()
{ 
var e = document.createEvent('KeyboardEvent');
if (e.initKeyboardEvent)
{
alert('hello'); e.initKeyboardEvent('keypress', true, true, document.defaultView, 'A', 0, '', false, '');
}
document.getElementById('login-email').dispatchEvent(e);
}

Answer 1

首先，我想指出.initKeyboardEvent()已被弃用。您可能想要的是事件构造函数(例如，对于"输入"事件，new InputEvent()，如下面的代码所示(

也就是说，我答案的其余部分假设问题实际上应该是"如何在文本框上手动触发输入事件？如果这实际上不是您想要的，请告诉我，但相同的概念应该适用于其他类型的事件。

。如果这是您的实际问题，我可以向您展示如何开始解决此问题：

const typeInto = (el, data) => {
// Note the use of the InputEvent constructor
const e = new InputEvent('input', {
inputType: 'insertText',
data,
})

// Manually add the text to element.value
el.value += data

// Fire the event like you were doing
el.dispatchEvent(e)
}
// Get element
const el = document.querySelector('.js-login-email')
// Add an event listener for the 'input' event, to prove it's working
el.addEventListener('input', e => {
console.log(`${e.inputType}: ${e.data}`)
})
// Example "typeInto" usage: call for each letter in the string below
'[e-mail]'.split('').forEach(letter => {
typeInto(el, letter)
})

<input type="email" class="js-login-email"/>

Answer 2

你试试addEventListener？

elem.AddEventListener("keypress", (e) => {
var e = document.createEvent('KeyboardEvent');
if(e.keyCode === 65) {
//...
}
document.getElementById('login-email').dispatchEvent(e);
});

Answer 3

您可以通过制作keydown事件来制作它，然后您可以获得按钮键代码

喜欢这个

window.addEventListener("keydown", function (event) {
console.log(event.keyCode)
});

所以在你的代码中它会是这样的

window.addEventListener("keydown", function (event) {
if(event.keyCode === 65){
console.log('hello, world');
}
}, true);

如果您不知道您需要检查哪个键代码，本网站将为您提供每个键的代码

或者如果你想从你的键名做，你可以这样做

window.addEventListener("keydown", function (event) {
console.log(event.key)
});

注意：每个按钮的键代码来自 assci 代码 如果您不知道它是什么，可以查看此链接

Answer 4

我现在尝试组合代码，但不确定我是否正确。

请注意，我想通过运行 presskey(( 函数以编程方式将字母"A"按入"登录电子邮件"框中。我尝试运行以下代码，但只显示警报框？

function presskey()
{ 
var e = document.createEvent('KeyboardEvent');
if (e.initKeyboardEvent)
{
alert('hello'); e.initKeyboardEvent('keypress', true, true, document.defaultView, 'A', 0, '', false, '');
}
document.getElementById('login-email').dispatchEvent(e);
}
var elem = document.getElementById('login-email');
elem.AddEventListener("keypress", (e) => {
var e = document.createEvent('KeyboardEvent');
if(e.keyCode === 65) {
//...
}
document.getElementById('login-email').dispatchEvent(e);
});