javascript - 如何在 标签内的选定位置插入文本

Question

我需要一个函数来在 <p> 中的光标位置插入文本标记并重新关注相同的

我有以下代码用于 textarea , 但它不适用于 <p>标签:

var front = (txtarea.value).substring(0, caretPos);
var back = (txtarea.value).substring(txtarea.selectionEnd,txtarea.value.length);
txtarea.value = front + text + back;
caretPos = caretPos + text.length;
txtarea.selectionStart = caretPos;
txtarea.selectionEnd = caretPos;
txtarea.focus();
txtarea.scrollTop = scrollPos;

Answer 1

这是一个函数，可以执行您描述的操作，适用于大多数元素标签( <p> 、 <div> 、 <span> 等...):

function addTextToElement(element, insertText) {
  var originalContent = element.innerHTML;

  var selection = document.getSelection();
  var range = selection.getRangeAt(0);

  var originalStart = range.startOffset;
  var originalEnd = range.endOffset;

  var front = originalContent.substring(0, originalStart);
  var back = originalContent.substring(originalEnd, originalContent.length);

  element.innerHTML = front + insertText + back;
}

Step 1: <input type="text" id="contentToAdd" placeholder="Type something here" /> <br/>
Step 2: place cursor / select some text in the p-tag below:
<p contenteditable="true" id="testPTag" style="background-color: cyan">0123456789</p>
<button onclick="addTextToElement(document.getElementById('testPTag'), document.getElementById('contentToAdd').value)">Press me to insert text</button>
<br/>

<p> 标签不是输入文本元素，它们没有 selectionStart 或 selectionEnd 属性。但是，您可以使用 document.getSelection() 来读取当前选择和选定范围。

此外，这些标签不依赖于它们的 .value 属性来显示，而是依赖 .innerHTML 。

在上面的示例中，我还向 contenteditable="true" 标签添加了 <p>，这允许您像在文本区域中一样编辑 <p> 标签。这不是必需的，但至少可以让您看到光标。

请注意，这不适用于 Internet Explorer 9 或更早版本。