项目开发中需要计算textarea光标的开始位置与结束位置,以便于在指定位置插入文本。下面这段代码测试通过,能够得到光标的开始位置与结束位置。var er = document.selection.createRange(),start = 0,end = 0;
if(er.parentElement().id === this.id){
// create a selection of the whole textarea
var er1 = document.body.createTextRange();
er1.moveToElementText(this);
//两个range,一个是已经选择的text(er),一个是整个textarea(er1)
//er1.compareEndPoints()比较两个端点,如果er1比er更往左(further to the left),则 //返回小于0的值,则er1往右移一点,直到两个er的start相同。
// calculate selection start point by moving beginning of er1 to beginning of er
for (start = 0;er1.compareEndPoints('StartToStart',er) < 0;start++){
er1.moveStart('character', 1);
}
// get number of line breaks from textarea start to selection start and add them to start
// 计算一下\n
for (var i = 0; i <= start;i++){
if (this.value.charAt(i) == '\n'){
start++;
}
}
// create a selection of the whole textarea
var er1 = document.body.createTextRange();
er1.moveToElementText(this);
// calculate selection end point by moving beginning of er1 to end of er
for (end = 0;er1.compareEndPoints('StartToEnd',er) < 0;end++){
er1.moveStart('character',1);
}
// get number of line breaks from textarea start to selection end and add them to end
for (var i = 0;i <= end;i++){
if (this.value.charAt(i) == '\n'){
end ++;
}
}
}
分享到:
相关推荐
在JavaScript编程中,获取和设置光标位置是常见的需求,特别是在与用户交互的表单元素如`<input>`和`<textarea>`中。这涉及到DOM(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...
### 在Textarea光标处插入文本 #### 知识点概览 本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境,包括Internet Explorer(IE)和其他基于Mozilla的浏览器(如Fire...
### JavaScript 获取光标所在文本框(text/textarea)中的位置 在前端开发中,经常需要处理用户在文本框(如`<input type="text">`或`<textarea>`)内的输入行为,例如实现自动填充、实时校验等功能时,获取光标的...
对于IE8及以下版本,它利用`document.selection`和`TextRange`对象来获取光标位置。 **获取选中起始位置和终止位置**: ```javascript function getSelectionRange(input) { if (input.selectionStart !== ...
在JavaScript中,获取光标在文本框(text)或文本区域(textarea)中的位置是一项常见的需求,这在处理用户输入时非常有用。标题和描述提到的`js 光标 文本框`,就是指通过JavaScript实现对文本输入光标的定位和获取...
在IT领域,特别是前端开发中,使用JavaScript在`textarea`元素的光标位置插入内容是一项常见且实用的技术。本文将详细解析如何实现这一功能,并深入理解其背后的逻辑与原理。 ### 核心知识点:在`textarea`光标处...
下面是一个使用JavaScript获取输入框中光标的位置的代码: ```javascript function GetCursorPsn(txb) { var slct = document.selection; var rng = slct.createRange(); txb.select(); rng.setEndPoint(...
4. 插入文本:在textarea中插入文本涉及到的JavaScript操作包括获取当前光标位置、在光标位置插入字符串、恢复光标焦点等。本文通过判断浏览器类型和版本,使用不同的方法获取和设置光标位置。 5. 文本操作:在...
在JavaScript中,可以通过`element.selectionStart`属性来获取当前光标所在的位置。这个属性返回的是一个整数,表示用户在文本框中光标所在的字符索引。例如: ```javascript const input = document....
本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法,并提供相应的代码示例。 首先,了解不同浏览器对于光标位置获取的支持情况是必要的。例如,IE浏览器使用了document....
在本文中,我们将探讨如何在 textarea 元素中实现光标定位,同时确保兼容 Internet Explorer(IE)和 Firefox(FF)这两种主要的浏览器。 在 textarea 中设置光标位置是一个常见的需求,特别是在用户交互场景中,如...
"获取和设置输入框光标位置的插件"就是这样一个工具,它允许开发者方便地获取或设定文本输入框中的光标位置,从而提升应用的功能性和用户友好性。 首先,我们需要理解光标在输入框中的作用。光标是用户输入时的指示...
在JavaScript中,获取光标在文本框(input[type="text"]或textarea)中的位置是一项常见的需求,这在处理用户输入或者实现某些特定功能时非常有用。以下是一些关于如何使用JavaScript来实现这一功能的关键知识点: ...
在JavaScript中,操作文本输入域,如`<textarea>`,涉及到光标位置的处理时,通常需要使用到浏览器提供的API。对于不同的浏览器,这些API可能会有所差异。在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的...
在JavaScript中,获取和设置光标位置是常见的需求,特别是在处理用户输入时,例如在`Input`或`TextArea`元素中。以下将详细介绍如何在不同类型的输入元素中实现这一功能,并确保兼容性。 首先,我们需要了解`Input`...
标题“JS在textarea光标处插入文本的小例子”和描述“本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器”揭示了该文档是关于如何使用JavaScript在网页文本区域(textarea)组件光标所在位置插入...
本文将深入探讨如何用JavaScript获取和设置Input和TextArea元素中的光标位置,并提供兼容性处理的方法。 在获取Input或TextArea元素光标位置时,我们需要区分对待IE浏览器和其他现代浏览器。IE浏览器通过document....
在IE浏览器中,通过document.selection.createRange()获取当前选区的范围,然后通过moveStart移动起始位置到文本输入框的开始,再通过length属性获取当前选区的长度,这个长度实际上就是光标的位置。对于Firefox等...
然而,对于不支持这些属性的老版IE浏览器,我们需要使用`document.selection`对象和`createRange()`方法来获取光标位置。以下是一个兼容IE的实现: ```javascript if (typeof(textBox.selectionStart) == "number")...