如何在内容可编辑的div中使Shift + Enter的行为像Enter？

Question

我正在研究使用内容可编辑的In[110]: df.groupby('A')['datetime'].agg(['first','last']) Out[110]: first last A 1 2019-03-04 00:03:00 2019-03-04 00:07:00 2 2019-03-04 00:05:00 2019-03-04 00:08:00 3 2019-03-04 00:09:00 2019-03-04 00:13:00 4 2019-03-04 00:12:00 2019-03-04 00:12:00 的组件。

注意1：：仅在Chrome上进行了测试。 注意2：：我无法使用jQuery。

按Enter键时的默认行为是添加新的div

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

如何使div的行为像Shift + Enter？

Enter

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


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

#root {
  border: 1px dotted blue;
}

Answer 1

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);
    }
}