jquery添加元素，然后选择(用于覆盖）添加的文本

jquery add element then select (for overwriting) added text

本文关键字：添加 覆盖 文本 用于 选择 元素 然后 jquery      更新时间：2023-09-26

我有一段简单的代码，用于向列表中添加新的项目符号。新项目符号具有"您的新项目符号"的通用文本，然后用户对其进行编辑。是否有任何方法可以在添加新的项目符号后，选择通用文本以进行覆盖。

我的代码是这样的。。。。

$(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>

感谢

使用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>

您可以使用.focus()，然后选择所有文本：

$(document).on("click", "#addNewBullet", function() {
  $('<li class="bullet editable" contentEditable="true">Your new bullet</li>').insertBefore('#addNewBullet').focus();
  document.execCommand('selectAll', false, null);
})
<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>

相关文章：