Question

<p contenteditable="true"></p>
<p contenteditable="true"></p>
<h1 contenteditable="true"></h1>

上面的代码由个人满足的元素组成，而不是让父母具有可信度。

我遇到的问题是，当用户点击其中任何一个元素中的Enter按钮时，它会在该标记内创建一个新标记。

示例

输出结果为：

<p contenteditable="true">
    <p>One</p>
    <p>Two</p>
</p>

所需的输出是：

<p contenteditable="true"></p>
<p contenteditable="true">One</p>
<p contenteditable="true">Two</p>

我也在使用jQuery来确保所有元素最终成为可信的：

setInterval(function () {
    $('p').attr('contenteditable','true');
    $('h1').attr('contenteditable','true');
},100);

感谢任何帮助，谢谢！

Answer 1

因此，您需要检测 ENTER 键以防止其新行行为。

现在也是触发变更元素的合适时机！

$("[contenteditable='true']").on("keydown",function(e){

  if(e.which=="13"){                      // 13 is enter key
    console.log("Enter Key!!");

    $(this).trigger("changeElement");     // Custom event here ;)
    return false;
  }
});

// Handler for our custom event: Focus on the next!
$("[contenteditable='true']").on("changeElement",function(){
  $(this).next().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p contenteditable="true"></p>
<p contenteditable="true"></p>
<h1 contenteditable="true"></h1>

Answer 2

我通过在特定时间间隔后检查contenteditable元素是否包含p标记来实现此功能。

如果恰好是这种情况，子元素将移动到父元素前面。

setInterval(function () {     
    $("[contenteditable='true']").each(function() {
        finder = $(this).find("p");
        $(finder).insertAfter($(this));
        $(finder).focus();
    });    
},100);

如何防止在Contenteditable元素中创建新标记？

2 个答案: