摘自网络
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在textarea光标处插入文字</title>
<script type="text/javascript">
//在光标位置插入文字
function insertText(obj, str) {
obj.focus();
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart == 'number'
&& typeof obj.selectionEnd == 'number') {
var startPos = obj.selectionStart, endPos = obj.selectionEnd, cursorPos = startPos, tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str
+ tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj) {
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character', len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number'
&& typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
</script>
</head>
<body>
<p>
<textarea id="text" style="width: 500px; height: 80px;">欢迎访问xdwangiflytek.iteye.com</textarea>
</p>
<p>
<input type="button" value="插入文字"
onclick="insertText(document.getElementById('text'),' NewWord ')">
</p>
<p>
<input type="button" value="移到末尾"
onclick="moveEnd(document.getElementById('text'))">
</p>
</body>
</html>
分享到：
相关推荐
要实现在光标位置插入文字，首先需要获取到光标位置。在JavaScript中，这可以通过`selectionStart`和`selectionEnd`属性来获取。例如，以下代码可以获取`Textarea`的光标位置： ```javascript var textarea = ...
本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境，包括Internet Explorer（IE）和其他基于Mozilla的浏览器（如Firefox）。我们将通过分析提供的代码示例来深入理解其...
在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时，主要涉及两个关键属性：`selectionStart`和`selectionEnd`，以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...
标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中，使用`contenteditable`属性将一个`<div>`元素设置为可编辑区域，允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...
标题中的"javascript控制在光标位置插入文字适合表情的插入"描述了一种使用JavaScript实现的功能，即在文本框（textarea）的当前光标位置插入特定的文字或表情。这个功能常见于许多聊天应用或编辑器中，允许用户在...
总的来说，这篇文档主要介绍了如何使用jQuery在文本输入框中实现光标位置插入内容的技巧，这对于提高Web页面的交互性，尤其是在需要丰富文本输入场景下，提供了很有用的解决方案。开发者通过学习这些知识点，可以...
在JavaScript中，向文本输入框或者富文本编辑器在光标位置插入特定内容是一项常见的需求。这涉及到对DOM（文档对象模型）的操作以及对文本选取的理解。以下将详细阐述实现这个功能所需的知识点。 首先，我们需要...
有时，开发者需要获取或操作文本框中的焦点光标位置、选中起始位置、终止位置以及选中的内容，这对于实现诸如高亮显示、文本编辑、格式化等功能至关重要。在本文中，我们将深入探讨这些概念，并提供兼容IE8的解决...
特别是在交互式应用中，我们经常需要获取或设置用户输入时的光标位置、选中文字的起始和终止位置，以及获取选中的文字内容。这些功能可以帮助我们实现更丰富的用户交互体验，比如自动补全、高亮显示等。以下是对这些...
主要是div通过contenteditable实现可编辑状态，可以实现按钮点击在光标处添加字符的功能
本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容，并提供相关代码示例。 首先，我们需要一个可编辑的div元素，通过设置`contenteditable="true"`属性来使其变为可编辑。以下是一个简单的HTML结构： `...
在HTML的可编辑元素（如`<input>`、`<textarea>`）中，光标位置表示用户正在输入或编辑文字的地方。通过JavaScript，我们可以获取或设置这个位置，从而实现更复杂的用户交互。 在jQuery中，没有直接的方法来获取或...
这样，我们就创建了一个完整的JavaScript光标位置工具函数库，它提供了获取和设置光标位置、选择文本以及插入文本的功能。这个库可以方便地应用于任何需要对textarea或input进行复杂文本操作的场合，极大地提高了...
例如，当一个文本框聚焦时，用户可以开始输入文字。而设置光标位置则是指在文本框中指定光标应该出现在哪个字符之后。 在jQuery中，我们可以利用`.focus()`方法来为一个元素设置聚焦。然而，这并不会自动将光标移动...
为了提供更加精细化的用户体验，开发者有时需要对输入框的光标位置进行控制，例如在自动填充、格式化输入或实现特定编辑功能时。"获取和设置输入框光标位置的插件"就是这样一个工具，它允许开发者方便地获取或设定...
2. **插入文本**：根据光标位置插入新文本。 3. **兼容性处理**：确保代码能够在不同版本的浏览器中正常运行。 #### 三、技术实现细节 ##### 1. 获取光标位置 - **IE浏览器**：使用`createTextRange()`方法创建...
插入操作完成后，我们还需要更新光标位置，以确保用户在输入时能够继续在正确的位置进行编辑。这一步在标准DOM中是通过调整Range对象的起点和终点来完成的，而在IE中则通过调用pasteHTML()方法来实现。 现在我们来...
本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考，具体如下： <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"&...