javascript - jquery 添加元素然后选择(用于覆盖)添加的文本

Question

我有一段简单的代码，用于将新的项目符号点添加到列表中。新项目符号点具有“您的新项目符号”的通用文本，用户随后可以对其进行编辑。有没有什么方法可以在添加新的项目符号点后选择通用文本以供覆盖。

我的代码看起来像这样......

$(document).on("click", "#addNewBullet", function(){
    $('<li class="bullet editable" contentEditable="true">Your new bullet</li>').insertBefore('#addNewBullet')
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bulletPoints" id="bullets">
<li class="bullet" contenteditable="true">Bullet1</li>
<li class="bullet" contenteditable="true">Bullet2</li>
<li class="bullet" contenteditable="true">Bullet3</li>
<div id="addNewBullet">+ Add</div>
</ul>

谢谢

Answer 1

使用focus，我添加了selectText功能来选择所有文本，因此可以轻松编辑文本。

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

$(document).on("click", "#addNewBullet", function() {
  $('<li class="bullet editable" contentEditable="true">Your new bullet</li>').insertBefore('#addNewBullet').focus().selectText();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bulletPoints" id="bullets">
  <li class="bullet" contenteditable="true">Bullet1</li>
  <li class="bullet" contenteditable="true">Bullet2</li>
  <li class="bullet" contenteditable="true">Bullet3</li>
  <div id="addNewBullet">+ Add</div>
</ul>