最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Sending keyboard events programmatically doesn't dispatch them into inputs - Stack Overflow

programmeradmin0浏览0评论

I am sending programmatically generated keyboard events to the document. I was hoping that the currently focused input element would display them, however it doesn't. The events are generated from a string with this function:

const simulateKeyPress = keys => {
  keys.split('').forEach(theKey => {
    const e = new window.KeyboardEvent('keypress', {
      bubbles: true,
      key: theKey,
      keyCode: theKey.charCodeAt(0),
      charCode: theKey.charCodeAt(0),
    })
    document.dispatchEvent(e)
  })
}

If I add an EventListener to the document it'll receive all the events. Their isTrusted flag is set to false however, might this be the issue?

I am sending programmatically generated keyboard events to the document. I was hoping that the currently focused input element would display them, however it doesn't. The events are generated from a string with this function:

const simulateKeyPress = keys => {
  keys.split('').forEach(theKey => {
    const e = new window.KeyboardEvent('keypress', {
      bubbles: true,
      key: theKey,
      keyCode: theKey.charCodeAt(0),
      charCode: theKey.charCodeAt(0),
    })
    document.dispatchEvent(e)
  })
}

If I add an EventListener to the document it'll receive all the events. Their isTrusted flag is set to false however, might this be the issue?

Share Improve this question asked Jul 31, 2017 at 9:51 Philip FeldmannPhilip Feldmann 8,4357 gold badges44 silver badges66 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

It cannot be done from website programmatically. Like you said isTrusted boolean as false will not trigger the keypress correctly (since Chrome 53): https://developer.mozilla/en/docs/Web/API/Event/isTrusted

I tried to solve this in here: https://codepen.io/zvona/pen/LjNEyr?editors=1010

where practically only difference is to dispatch the event for activeElement, like: document.activeElement.dispatchEvent(e);. In addition, if you're able to hook on input's events, you can add event listener to do the job:

input.addEventListener('keypress', (evt) => {
  evt.target.value += evt.key;
});

But like mentioned, it's not trusted event. However, this can be done via browser extensions (see: How to to initialize keyboard event with given char/keycode in a Chrome extension?)

发布评论

评论列表(0)

  1. 暂无评论