问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
想发财的野马
    32
    新手上路，请多包涵


    在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>
    换行javascriptcontenteditablehtml
    阅读 1.5k
    avatarAI BotBETA

    这个问题涉及到HTML和JavaScript的交互，以及contenteditable属性的工作方式。当你使用shift+enter在contenteditable元素内换行时，浏览器通常会插入一个<br>标签，而不是<p>标签。这就是为什么你的结构看起来混乱的原因。

    解决这个问题的一种方法是使用JavaScript来更精确地控制内容的格式。下面是一个改进的示例代码，使用DOM API来创建一个新的<p>元素，并将其插入到光标所在的位置：

    <!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) {
      if (event.shiftKey && event.keyCode === 13) { // 判断shift+enter键被按下
        var selection = window.getSelection(); // 获取当前选区
        var range = selection.getRangeAt(0); // 获取第一个选区范围
        var newParagraph = document.createElement('p'); // 创建一个新的<p>元素
        newParagraph.innerHTML = 'New paragraph'; // 将新段落的内容设置为'New paragraph'
        range.insertNode(newParagraph); // 将新段落插入到选区位置
        range.setStartAfter(newParagraph); // 将选区移动到新段落之后
        range.setEndAfter(newParagraph); // 将选区结束位置也移动到新段落之后
        selection.removeAllRanges(); // 清除所有选区，确保只留下新的选区
      }
    }
    function inputText() {
      // 在这里处理文本插入后的逻辑，比如获取新插入段落的内容等
      console.log('Input text:', document.getElementById('editable').innerHTML);
    }
  </script>
</body>

</html>

    这段代码中，我们首先检查是否同时按下了shift键和enter键（通过检查event.shiftKey和event.keyCode === 13）。如果是，我们创建一个新的<p>元素，并将其插入到当前选区位置。然后，我们将选区移动到新段落之后，以确保用户可以继续在新的段落中输入文本。最后，我们清除所有选区，确保只留下新的选区。这样就可以实现更精确地控制内容格式的目的，避免了结构混乱的问题。

    1 个回答
    得票最新
    头像
    唯一丶
      23.2k103743
      ✓ 已被采纳

      试了一下，这样可以

        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) 中进行测试。
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题