如何使得在contenteditable div中，Shift + Enter的行为和Enter键一致？

Question

如何使得在contenteditable div中，Shift + Enter的行为和Enter键一致？

javascripthtml

4

我正在开发一个使用了 contenteditable 属性的 div 组件。

注意1：此内容仅在 Chrome 浏览器上测试过。 注意2：我不能使用 jQuery。

当按下回车键时，添加新的 <div><br><div> 是默认行为。

但是，当您按下 Shift + Enter 时，它只会在当前的 div 中添加一个 <br>。

如何让 Shift + Enter 的行为与 Enter 相同？

let myDiv = document.getElementById('root');


function handleInput() {
  console.log('Div innerHTML: ' + myDiv.innerHTML);
}

#root {
  border: 1px dotted blue;
}

<p>Click on the div below and press Enter and Shift+Enter to see the difference</p>

<div 
  id="root" 
  contenteditable
  onInput="handleInput()"
>
</div>

- cbdeveloper

1

值得一提的是，Safari使用⇧ + ↵插入<div><br></div>，而仅使用⌃ + ↵插入<br>。Chrome不会在使用⌃ + ↵时进行任何输入。 - Jacob Ford

谢谢。但是你说的 ⌃ + ↵ 是什么意思？ - cbdeveloper

1

Control + Enter - Jacob Ford

@JacobFord 那个对于 Windows 来说是同样的 control 和 shift 键，对吗？command + enter 有什么作用吗？谢谢！ - cbdeveloper

1

刚刚检查了一下！在 macOS 上，无论是在 Safari 还是 Chrome 中，⌘ + ↵ 都不起作用。我还没有检查 ctrl + Enter 是否会在 Windows 上强制换行。 - Jacob Ford

1

@JacobFord 谢谢！在 Windows/Chrome 上 ctrl + Enter 没有任何反应。 - cbdeveloper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gbalduzzi · Accepted Answer

myDiv.onkeypress = function (evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        // Shift + enter pressed
        evt.preventDefault()
        evt.stopPropagation() // Stop default handling

        // Simulate enter is pressed
        var e = new Event("keydown");
        e.keyCode = 13;
        e.which = e.keyCode;
        myDiv.dispatchEvent(e);
    }
}