diff --git a/packages/core/src/text-area/event-handlers/index.ts b/packages/core/src/text-area/event-handlers/index.ts index cc49b8666..16541b356 100644 --- a/packages/core/src/text-area/event-handlers/index.ts +++ b/packages/core/src/text-area/event-handlers/index.ts @@ -14,6 +14,7 @@ import { } from './composition' import handleOnKeydown from './keydown' import handleKeypress from './keypress' +import handleInput from './input' import handleOnCopy from './copy' import handleOnCut from './cut' import handleOnPaste from './paste' @@ -30,6 +31,7 @@ const eventConf = { compositionupdate: handleCompositionUpdate, keydown: handleOnKeydown, keypress: handleKeypress, + input: handleInput, copy: handleOnCopy, cut: handleOnCut, paste: handleOnPaste, diff --git a/packages/core/src/text-area/event-handlers/input.ts b/packages/core/src/text-area/event-handlers/input.ts new file mode 100644 index 000000000..6e3027485 --- /dev/null +++ b/packages/core/src/text-area/event-handlers/input.ts @@ -0,0 +1,32 @@ +/** + * @description 监听 keypress 事件 + * @author wangfupeng + */ + +import { Editor } from 'slate' +import { IDomEditor } from '../../editor/interface' +import TextArea from '../TextArea' +import { HAS_BEFORE_INPUT_SUPPORT } from '../../utils/ua' +import { hasEditableTarget } from '../helpers' + +// + +function handleInput(event: Event, textarea: TextArea, editor: IDomEditor) { + // 这里是兼容不完全支持 beforeInput 的浏览器。对于支持 beforeInput 的浏览器,会用 beforeinput 事件处理 + if (HAS_BEFORE_INPUT_SUPPORT) return + + if (textarea.isComposing) return + + const { readOnly } = editor.getConfig() + if (readOnly) return + if (!hasEditableTarget(editor, event.target)) return + + event.preventDefault() + + const text = (event as any).data as string + + // 这里只兼容 beforeInput 的 insertText 类型,其他的(如删除、换行)使用 keydown 来兼容 + Editor.insertText(editor, text) +} + +export default handleInput