在 contenteditable div 中按下回车后不会触发 onInput

Posted 2023-05-07

【中文标题】在 contenteditable div 中按下回车后不会触发 onInput

【英文标题】：onInput is not being triggered after the enter is pressed in contenteditable div

【发布时间】：2021-07-21 02:08:35

【问题描述】：

我在我的 react 组件中创建了一个 contenteditable div，当我在 div 中按 enter 并尝试输入一些内容时，函数 onInput 没有被触发。这只是 Mozilla 的情况。此外，当我输入 enter 或 backspace 时，它​​可以工作，但如果我想输入一些普通字母，它就不起作用。 Tnx 寻求帮助：

<div
    id=Constants.FREE_FORMULA__TEXTAREA_INPUT__ID
    contentEditable="true"
    name="value"
    className="slds-textarea formula-container"
    type=Constants.FREE_FORMULA__TEXTAREA_INPUT__ID
     value=text
     onInput=(e) => 
        this.handleOnChange(e);
       
      onPaste=e => this.handleOnPaste(e)
      onBlur=() => 
        const textArea = document.getElementById(Constants.FREE_FORMULA__TEXTAREA_INPUT__ID);
        textArea.focus();
        
   />

【问题讨论】：

这可能与 React 的 SyntheticEvent 有关。

用keypress 代替input 怎么样？

@YaakovAinspan 请告诉我更多信息：D

@ScottMarcus 我试过了，但也没用。

使用 keyUp 事件似乎在 firefox 中有效

【参考方案1】：

Sveto，*** 尚未允许我发表评论，所以很遗憾，我不得不将其放入答案中。

您是否尝试过使用onChange=(e) => this.handleOnChange(e)？

虽然 React 对 onInput 和 onChange 的处理应该几乎完全相同，但在我看来 onChange 更加一致和可持续。试试看，如果您发现代码发生变化，请告诉我。

【讨论】：

Tnx 的答案，但它不起作用:(