javascript - contentEditable 在特定元素内设置插入符号

Question

我无法将插入符号设置为第一个 <p>在内容可编辑<div> .

我见过this solution但它适用于元素之前或之后。如何将其放入元素中？

这是我到目前为止所拥有的:

$('#content').on('click', function(){

  if($('#placeholder').length > 0)
    $('#placeholder').removeAttr('id').text('').focus();

});

#content{
    border: 1px solid black;
    min-height: 100px;
    padding: 20px;
}

#placeholder{
    color: red;
}

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

<div id='content' contentEditable=true>
  <p id='placeholder'>placeholder</p>
</div>

它清除占位符并且根本不设置插入符号。

如何解决这个问题？

Answer 1

你遇到的问题是你p元素没有内容，0px 也没有内容height 。观察控制台你可以看到contenteditable经常加一个<br>单击它时，您可以在这里执行相同的操作，然后您将获得插入符号。

$('#content').on('click', function(){

  if($('#placeholder').length > 0)
    $('#placeholder').removeAttr('id').html('<br>').focus();

});

#content{
    border: 1px solid black;
    min-height: 100px;
    padding: 20px;
}

#placeholder{
    color: red;
}

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

<div id='content' contentEditable=true>
  <p id='placeholder'>placeholder</p>
</div>