我可以设置输入样式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
,因此我们可以插入单击的符号,这很容易出错,并且需要额外的代码(通常很难看)。我想避开它。
我猜这是不可能做到的,因为这可能是一个安全风险,但提出要求从来没有坏处。
