以编程方式将关键字符分派到输入/内容可编辑

Question

我可以很容易地设置输入样式 DOM 元素 ( input/ div contenteditable=true) 的值，通过 JS 设置它们的.value或innerText属性。

但是是否可以向它们分派键盘事件，加载一个字符，以便将分派的字符插入到当前光标位置？

这是一个不起作用的例子。

'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>

为什么我需要这个：

我们正在为应用程序构建符号键盘，该键盘将允许用户将符号添加到当前光标位置。

跟踪 a 中的当前光标位置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>