使用contenteditable=”true”的編輯框時，Shift+Enter換行容易導致html結構混亂。本文提供解決方案，避免此問題影響用戶體驗。
問題根源在于contenteditable編輯框默認的換行行為。 為了解決這個問題，我們需要攔截Shift+Enter的默認行為，并以編程方式插入有序的段落。 利用JavaScript的keydown事件監聽器，當檢測到Shift+Enter組合鍵時，阻止默認行為，然后插入新的段落元素。
以下代碼示例演示了如何實現：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #editable { width: 300px; height: 300px; border: 1px solid #ccc; padding: 10px; } </style> <div contenteditable="true" id="editable" oninput="inputText()" onkeydown="keyDown(Event)"></div> <script> function keyDown(event) { if (event.shiftKey && event.keyCode === 13) { event.preventDefault(); document.execCommand('insertParagraph'); return false; } document.execCommand('formatblock', false, '<p>'); } function inputText() { if (document.getSelection().focusNode.data !== undefined) { let currentElement = document.getSelection().focusNode.parentNode; console.log(currentElement.innerHTML); } } </script>
代碼中，keyDown函數監聽keydown事件。當檢測到Shift+Enter ( event.shiftKey && event.keyCode === 13 )，event.preventDefault()阻止默認行為，document.execCommand(‘insertParagraph’)插入一個新的段落元素。 inputText 函數用于監控輸入內容變化（這里只是示例，可以根據實際需求修改或刪除）。
此解決方案已在chrome 120.0.6099.201 (Official Build) (64-bit) (cohort: Control)版本中測試有效。其他瀏覽器或版本可能需要調整。 請注意，document.execCommand已被部分瀏覽器棄用，建議使用更現代化的dom操作方法進行替換，以確保更好的兼容性。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
