在光标位置的文本区域中插入文本 - Javascript

本文介绍如何使用 Javascript 在文本区域中插入文本。在实际开发中，经常需要对文本框或网页中的文本进行修改，插入文本就是其中一种操作。

插入文本的方法

在 Javascript 中，可以使用以下两种方法向文本区域插入文本：

1. 使用 insertAdjacentText 方法；
2. 更新文本区域的 value 值。

下面分别介绍这两种方法。

插入文本：使用 insertAdjacentText 方法

insertAdjacentText 方法是 Html DOM 元素的方法，它可以在元素的指定位置插入文本。它的语法如下：

element.insertAdjacentText(where, text);

其中，element 表示要插入文本的元素，where 表示插入的位置，常用的值有以下四个：

• beforebegin：在元素前插入文本；
• afterbegin：在元素内部开头插入文本；
• beforeend：在元素内部结尾插入文本；
• afterend：在元素后插入文本。

text 表示要插入的文本。例如，要在 id 为 myText 的文本框中插入文本 hello world，可以使用以下代码：

var el = document.getElementById("myText");
el.insertAdjacentText("beforeend", "hello world");

插入文本：更新文本区域的 value 值

更新文本区域的 value 值是另一种向文本区域插入文本的方法。通常情况下，我们使用这种方法的是针对 textarea 标签。

通过更新 value 值，我们可以将文本框中的文本全部替换，或者在文本框中的光标位置处插入新的文本。下面是一些示例代码：

// 全部替换文本
document.getElementById("myTextarea").value = "new text";

// 在光标位置处插入文本
var textarea = document.getElementById("myTextarea");
var cursorPosition = textarea.selectionStart;
var textBeforeCursor = textarea.value.substring(0, cursorPosition);
var textAfterCursor = textarea.value.substring(cursorPosition, textarea.value.length);
textarea.value = textBeforeCursor + "new text" + textAfterCursor;

结语

本文介绍了两种向文本区域插入文本的方法，分别是使用 insertAdjacentText 方法和更新文本区域的 value 值。使用这两种方法可以满足大多数情况下的操作需求。