javascript - 按回车键时如何停止 contentEditable ="true"插入 <div> 而不是 <p>？

Question

我有一个div

<div contentEditable="true">
    <h1> My headline</h1>
</div>

如果我正在编辑 <h1> 中的文本标签，然后按回车，它会在下面添加一个新的 div，而不是通常在输入回车时插入的普通段落标签

制作:

<div contentEditable="true">
    <h1> My headline edited</h1>
    <div> i tapped return</div>
</div>

我真正想要的是

<div contentEditable="true">
    <h1> My headline edited</h1>
    <p> i tapped return</p>
    <p> return again</p>
</div>

奇怪的是，通常当你在某处写字并按下回车键时，它会添加一个新的 <p>。 , 但只是在编辑时没有 <h1> .是否可以使用 Javascript/Jquery/Html5 解决此问题？

我在 iOS 设备上使用 Safari

Answer 1

使用 p 在 onkeyup 中添加格式拦截器将强制 contenteditable (div) 添加 <p>返回标签。

editable.onkeyup = (e)=> {
    e = e || window.event
    if (e.keyCode === 13)
        document.execCommand('formatBlock', false, 'p');
}