如何在 <p> 标签内的选定位置插入文本

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>标签不是输入文本元素，它们没有选择开始或选择结束属性。但是，您可以使用 来document.getSelection()读取当前选项和所选范围。

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

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

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