textarea 光标位置插入
时间: 2023-10-11 22:03:17 浏览: 113
在textarea光标处插入文本
4星 · 用户满意度95%
textarea 光标位置插入是指在文本区域(textarea)中的光标位置上插入新的文本或内容。
要实现在指定位置插入文本,可以通过以下步骤进行:
1. 获取文本区域的光标位置,可以使用textarea元素的selectionStart和selectionEnd属性来获取。
2. 将要插入的文本与原有文本分成两个段落,即左侧和右侧。
3. 将左侧段落与要插入的文本拼接起来,再拼接右侧段落,形成新的文本。
4. 将新的文本重新赋给文本区域。
以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Textarea光标位置插入示例</title>
<script>
function insertText() {
var textarea = document.getElementById("myTextarea");
var position = textarea.selectionStart;
var textToInsert = "新的文本";
var originalText = textarea.value;
var newText = originalText.slice(0, position) + textToInsert + originalText.slice(position);
textarea.value = newText;
}
</script>
</head>
<body>
<textarea id="myTextarea"></textarea>
<button onclick="insertText()">在光标位置插入</button>
</body>
</html>
```
在上述示例中,我们通过获取textarea元素的selectionStart属性获得光标位置,并使用slice函数将原有文本按照光标位置拆分成左右两个段落。接着,我们将新的文本插入到左侧段落中,并再次拼接上右侧段落,最后将新的文本赋给textarea的value属性即可。
这样,当点击按钮时,就能在光标位置插入指定的新文本。
阅读全文