contenteditable 编辑器中使用 Shift+Enter 导致结构紊乱的解决方法
在使用 contenteditable="true" 属性的编辑框时,使用 Shift+Enter 换行会破坏文本的结构。这是因为浏览器默认会在 Shift+Enter 时执行<br>标签,而<br>标签在 HTML 结构中并不合适。
解决方法:
浏览器提供了 insertParagraph 命令,可以将选中的文本用<p>标签包裹。要解决 Shift+Enter 导致的结构紊乱问题,可以修改 keydown 事件处理函数:
function keyDown (event) { if (event.shiftKey && event.keyCode === 13) { event.preventDefault(); document.execCommand('insertParagraph'); return false; } document.execCommand('formatblock', false, '<p>'); }
说明:
提示:
以上解决方法仅在 Chrome 浏览器中测试通过。对于其他浏览器,可能存在不同的方法。