键盘事件冲突

[QmagicianEX]

请问键盘事件有冲突怎么解决呢，就是输入框的上下左右会影响元素的上下左右，删除监听也会被触发。

[leaferjs]

关闭交互功能： leafer.interaction.stop() 开启交互功能： leafer.interaction.start()

[leaferjs]

如果页面不需要渲染，可以用更简单的 leafer.stop() / leafer.start()

[QmagicianEX]

// 删除监听，这个好像在别的输入框点击删除输入(如上图右侧的输入框)，也会被捕捉到，我以为只会聚焦在编辑器才会被捕捉到 this.app.on(KeyEvent.DOWN, this.removeItems) // 移除选中的元素 removeItems(e) { if (e.key == 'Backspace' || e.key == 'Delete') { let editor = this.app.editor let target = editor.target if (editor.single) { editor.removeItem(target) this.app.tree.remove(target) } else { if (editor.multiple) { target.forEach(item => { editor.removeItem(item) this.app.tree.remove(item) }) } } } },

[leaferjs]

编辑器增加了是否接收键盘事件的设置：

http://localhost:5173/ui/guide/plugin/editor/config.html#keyevent-boolean

[rojer95]

我目前是这样解决的 ~

    function onKeyDown(e: KeyEvent) {
      if (
        ["INPUT", "TEXTAREA"].includes(
          document.activeElement?.tagName as string
        )
      ) {
        e.stop();
      }
    }

    app?.on(KeyEvent.DOWN, onKeyDown, true);

[QmagicianEX]

我目前是这样解决的 ~

    function onKeyDown(e: KeyEvent) {
      if (
        ["INPUT", "TEXTAREA"].includes(
          document.activeElement?.tagName as string
        )
      ) {
        e.stop();
      }
    }

    app?.on(KeyEvent.DOWN, onKeyDown, true);

我是聚焦监听编辑器外面的div来做的

<div class="center-container" id="ed-editor-container" tabindex="0">
    <div id="editor-container"></div>
</div>

使用 tabindex="0"来让div 可获得聚焦，然后监听键盘按下(长按会连续触发)或弹起事件

const edEditorContainer = document.getElementById('ed-editor-container')
edEditorContainer.removeEventListener('keyup', this.handleKeyEvent)
edEditorContainer.addEventListener('keyup', this.handleKeyEvent)

// 可按需使用手动聚焦
// edEditorContainer.focus()

然后在 事件处理中做判断，处理不同键盘事件

// 监听键盘事件
handleKeyEvent(e) {
    console.log(e)
}

如果聚焦时会有黑线（类似待输入的那种），可以设置 outline 属性为 none 来移除聚焦时的外边框线

#ed-editor-container:focus {
    outline: none;
}