Question

$('#parent').on('input', function(){
  let a = $(this).html();
  console.log(a);
});

.parent{
  background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent' id='parent' contentEditable>
  lorem ipsum
</div>

将光标置于文本末尾，然后按Enter。
在控制台中，我只希望<br>而不会打开和关闭div标签。

现在，假设我要一个水平尺。输入<hr>
结果-<div><hr></div>

当然，当我将此值放在数据库（php，mysql）中并取回数据时-没有水平尺，只是<hr>标签就字面上了。

如何像这样获得所需的html：

<br>  
<hr>

Answer 1

像这样吗？

$(function() {
  $('#parent').on('input', function() {
    // Retrieve the HTML-decoded content and log it
    let content = $('<textarea>')
      .html($(this).html())
      .text().trim()
      .replace(/<br><br>$/, '<br>');
    console.log(content);
  });

  $('#parent').on('keydown', function(e) {
    // Catch Enter key and insert <br>'s manually
    if (e.which === 13) {
      document.execCommand('insertHTML', false, '<br><br>');
      e.preventDefault();
    }
  });
})

.parent {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="parent" contenteditable>
  lorem ipsum
</div>

如何从contentEditable div获取所需的html

1 个答案: