Программная диспетчеризация ключевых символов для ввода / содержания

Question

Я могу довольно легко установить значение элементов DOM стиля ввода (input / div contenteditable=true), установив их свойства .value или innerText через JS.

Но этоможно ли отправить им события клавиатуры, загруженные символом, чтобы он вставлял отправленный символ в текущую позицию курсора?

Вот пример, который не работает.

'use strict'

const btn = document.querySelector('#btn')
const editable = document.querySelector('#editable')

btn.addEventListener('mousedown', e => {
  // prevent unfocus when clicking button
  e.preventDefault()
  
  const customEvt = new KeyboardEvent('keypress', {
    bubbles: true, 
    cancelable: true, 
    key: 'X', 
    char: 'X'
  })

  editable.dispatchEvent(customEvt)
})

#editable {
  border: 1px solid;
  padding: 8px 12px;
}

<p> Make sure the editable is focused before pressing button</p>
<div id="editable" contenteditable="true">Lorem Ipsum</div>
<button id="btn"> Add 'X' character at cursor position</button>

Зачем мне это нужно:

Мы создаем клавиатуру символов для приложения, которая позволит пользователям добавлять символы втекущая позиция курсора.

Отслеживание текущей позиции курсора в contenteditable, поэтому мы можем вставить нажатый символ, подвержен ошибкам и требует дополнительного (и часто уродливого) кода.Я бы хотел этого избежать.

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

Answer 1

Вы не можете подделать нажатие клавиши, но вы можете использовать document.execCommand.insertText, который должен дать более или менее тот же результат.Смотри https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand

'use strict'

const btn = document.querySelector('#btn')
const editable = document.querySelector('#editable')

btn.addEventListener('mousedown', e => {
  // prevent unfocus when clicking button
  e.preventDefault() 
  console.log(document.execCommand('insertText', false, 'X'));
  

  
})

#editable {
  border: 1px solid;
  padding: 8px 12px;
}

<p> Make sure the editable is focused before pressing button</p>
<div id="editable" contenteditable="true">Lorem Ipsum</div>
<button id="btn"> Add 'X' character at cursor position</button>