<html>
<script>
var start = 0;
var end = 0;
function add(){
var textBox = document.getElementById("ta");
var pre = textBox.value.substr(0, start);
var post = textBox.value.substr(end);
textBox.value = pre + document.getElementById("inputtext").value + post;
}
function savePos(textBox){
if (typeof (textBox.selectionStart) == "number") {
start = textBox.selectionStart;
end = textBox.selectionEnd;
}
else if(document.selection){
var range = document.selection.createRange();
if (range.parentElement().id == textBox.id) {
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (start = 0; range_all.compareEndPoints("StartToStart",
range) < 0; start++)
range_all.moveStart('character', 1);
for ( var i = 0; i <= start; i++) {
if (textBox.value.charAt(i) == '\n')
start++;
}
varrange_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end++)
range_all.moveStart('character', 1);
for ( var i = 0; i <= end; i++) {
if (textBox.value.charAt(i) == '\n')
end++;
}
}
}
document.getElementById("start").value = start;
document.getElementById("end").value = end;
}
</script>
<body>
<form action="a.cgi">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>start:<input type ="text"id="start" size="3" /></td>
<td>end:<input type ="text"id="end" size="3" /></td>
</tr>
<tr>
<td colspan="2">
<textarea id ="ta" onKeydown="savePos(this)"
onKeyup="savePos(this)" onmousedown="savePos(this)"
onmouseup="savePos(this)" onfocus="savePos(this)" rows="14" cols="50">
</textarea>
</td>
</tr>
<tr>
<td><input type ="text" id="inputtext" /></td>
<td><input type ="button" onClick="add()" value="AddText" /></td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入
jQuery扩展函数，用于获取设置textarea中光标位置
在JavaScript编程中，获取和设置光标位置是常见的需求，特别是在与用户交互的表单元素如`<input>`和`<textarea>`中。这涉及到DOM（文档对象模型）操作和事件处理，对于创建动态和响应式的网页应用至关重要。本文将...
例如，以下代码可以获取`Textarea`的光标位置： ```javascript var textarea = document.getElementById('myTextarea'); var cursorPos = textarea.selectionStart; ``` 然后，需要监听用户的输入事件，比如`...
### 在Textarea光标处插入文本 #### 知识点概览 本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境，包括Internet Explorer（IE）和其他基于Mozilla的浏览器（如Fire...
此外，还有一个辅助函数`getValue(obj)`，它接收一个事件触发的对象（通常是文本框或文本区域），调用`getPosition()`获取光标位置，然后弹出一个警告框显示光标前后的文本内容，方便开发者调试和查看。 ```...
有时，开发者需要获取或操作文本框中的焦点光标位置、选中起始位置、终止位置以及选中的内容，这对于实现诸如高亮显示、文本编辑、格式化等功能至关重要。在本文中，我们将深入探讨这些概念，并提供兼容IE8的解决...
4. 插入文本：在textarea中插入文本涉及到的JavaScript操作包括获取当前光标位置、在光标位置插入字符串、恢复光标焦点等。本文通过判断浏览器类型和版本，使用不同的方法获取和设置光标位置。 5. 文本操作：在...
在IT领域，特别是前端开发中，使用JavaScript在`textarea`元素的光标位置插入内容是一项常见且实用的技术。本文将详细解析如何实现这一功能，并深入理解其背后的逻辑与原理。 ### 核心知识点：在`textarea`光标处...
对于写javascript写网页编辑器的人来说，获取textarea中的光标位置是一个非常重要的问题，而往往很多人在这个地方不知所措，找不到好的办法。昨天我在网上找到了一段javascript代码，本来不想把原版放在这里的，就是...
还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航"，核心技术点也是获取输入框中的光标位置。 获取输入框中的光标位置的整个代码其实很短，只是这些对象和方法不太常用而已。下面是一个使用JavaScript获取...
本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法，并提供相应的代码示例。 首先，了解不同浏览器对于光标位置获取的支持情况是必要的。例如，IE浏览器使用了document....
通过以上介绍，我们可以了解到在JavaScript中获取光标位置的基本原理和技术细节。这不仅有助于我们更好地理解用户的行为，还能为用户提供更加友好的交互体验。希望本文能帮助你在实际项目中有效地利用这些技术点。
JavaScript获取光标位置是网页开发中的一个重要功能，它在用户输入、文本编辑或者富文本处理等场景中扮演着关键角色。这个功能可以帮助开发者精确地控制用户在文本输入框中的光标定位，例如在某些特定字符后插入文本...
这个简单的Vue与HTML结合的示例展示了如何在用户输入时实时获取textarea中的选中文本和光标位置。在实际项目中，你可以根据需求扩展这个功能，比如增加字符计数、格式检查或其他高级功能。通过Vue.js的强大功能和...
"获取和设置输入框光标位置的插件"就是这样一个工具，它允许开发者方便地获取或设定文本输入框中的光标位置，从而提升应用的功能性和用户友好性。 首先，我们需要理解光标在输入框中的作用。光标是用户输入时的指示...
jQuery textArea文本光标全功能插件，可以获取光标位置，向光标文字插入文本，高亮显示指定的文本块
在JavaScript中，操作文本输入域，如`<textarea>`，涉及到光标位置的处理时，通常需要使用到浏览器提供的API。对于不同的浏览器，这些API可能会有所差异。在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的...
今天我们将探讨的是一款名为jQuery.curpos.js的插件，它专门用于获取textarea输入框中的光标位置，使得开发者能够更便捷地进行文本操作。 首先，jQuery.curpos.js插件的核心在于其提供的方法，允许我们轻松获取或...