在contenteditable="true"的编辑框内使用shift+enter换行之后，结构混乱 怎么解决?

作者站长头像
站长
· 阅读数 24

在contenteditable="true"的编辑框内使用shift+enter换行之后，结构混乱 怎么解决?在contenteditable="true"的编辑框内使用shift+enter换行之后，结构混乱 怎么解决 求

<!DOCTYPE html>
<html lang="en">

<head>
    <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>
</head>

<body>
    <div id="editable" contenteditable="true" oninput="inputText()" onkeydown="keyDown(event)">
    </div>
    <script>
        function keyDown(event) {
                document.execCommand('formatblock', false, '<p>');
        }
        function inputText() {
            // 把一段文字用 p 标签包裹起来
            if (document.getSelection().focusNode.data !== undefined) {
                // 当前所在元素
                var currentElement = document.getSelection().focusNode.parentNode;
                // 父元素内容
                console.log(currentElement.innerHTML);
            }
        }

    </script>
</body>

</html>
回复
1个回答
avatar
test
2024-06-23

试了一下，这样可以

  function keyDown (event) {
    if (event.shiftKey && event.keyCode === 13) {
      event.preventDefault();
      document.execCommand('insertParagraph');
      return false;
    }

    document.execCommand('formatblock', false, '<p>');
  }
仅在 Chrome 120.0.6099.201 (Official Build) (64-bit) (cohort: Control) 中进行测试。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容