javascript - 如何通过快捷方式添加特殊字符到任何输入？

Question

我有一个应用程序，每次用户按下快捷键 Ctrl+D 时，我都需要添加特殊字符、表情符号或类似内容。

问题是我正在使用 Flux，并且页面上有多个输入，因此当有人将字符添加到其中一个输入时，它将调用一个操作，分派(dispatch)到商店，然后更新 View 。

要添加这个特殊字符，我需要处理 keyEvent 并知道使用哪个输入组件来更新存储中的相应属性。

handleShortcut(evt) {
    if (evt.keyCode === ...) {
        MyActions.addSpecialChar();
        evt.preventDefault();
    }
}

这是唯一的方法吗？我知道我可以使用 document.activeElement 或 evt.target 获取输入，但由于输入由存储状态控制，我无法更改它们的值...有什么想法吗？

** 更新 **

为了让事情更清楚......我想让我的应用程序表现得像“桌面应用程序”，无论我在应用程序中使用哪个输入，如果我按下组合键，它都会放置一个特殊字符在该输入中，这意味着它将由 onChange 处理。 (我对 React 或 JS 不太熟悉，所以也许我要求太多了..)

因此，我的高阶组件中会有一个 onKeyPress 来处理组合，并在将特殊字符添加到输入的 value 属性后触发事件输入上的 onChange。

我实现这一目标的方法是在每个输入上设置一个 onKeyPress，它将查找组合并发送与我的 onChange 相同的操作，但在文本中包含特殊字符。

<input
    onKeyPress={(evt)=>{
        /* ... Check combination ... */
        let text = _addSpecialChar(evt.target.value);
        MyActions.update(text);
    }}
    onChange={(evt)=>{
        MyActions.update(evt.target.value);
    }}
/>

正如我上面所说，我想将 onChange 的组合作为普通字符来处理，这样我就不必在每个输入上添加 onKeyPress 。这可能吗？

Answer 1

啊谢谢，你的更新让事情变得更加清晰。您可以尝试在输入表情符号后手动触发输入上的更改事件吗？

handleShortcut(evt) {
    if (evt.keyCode === ...) {
        MyActions.addSpecialChar();
        evt.preventDefault();
        // Manually trigger on change here of the active element
        evt.target.onchange();
    }
}

如果您需要模拟完整的更改事件，可以尝试以下操作:

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
evt.target.dispatchEvent(event);