Question

我需要一个函数在标签内的光标位置插入文本，然后重点关注相同的

我有textarea的以下代码，但它不适用于代码：

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

这是一个执行您所描述的功能的函数，适用于大多数元素标记（，<div>，等等...：

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/>

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

此外，这些代码不依赖于.value属性进行展示，而是依赖.innerHTML。

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

请注意，这在Internet Explorer 9或更早版本上不起作用。

Answer 2

正如您在HTMLTextAreaElement中所读到的那样，selectionStart不适用于任何其他HTMLElement。

但您可以使用contenteditable对元素进行编辑。然后，的行为类似于textarea。

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

2 个答案: