各浏览器TextArea获得焦点后的光标位置情况:
textarea.focus()
FireFox: 所有文字结束处
IE: 文字开头
Opera: 文字开头
Chrome: 文字开头
Safari: 文字开头
IE支持document.selection,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性。
针对浏览器的特性进行判断并实现,代码如下:
function insertText(obj,str) {
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;
}
}
参考:
http://foxling.org/js-ajax-dom/cross-browser-cursor-position-in-textarea/
分享到:
相关推荐
要实现在光标位置插入文字,首先需要获取到光标位置。在JavaScript中,这可以通过`selectionStart`和`selectionEnd`属性来获取。例如,以下代码可以获取`Textarea`的光标位置: ```javascript var textarea = ...
本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境,包括Internet Explorer(IE)和其他基于Mozilla的浏览器(如Firefox)。我们将通过分析提供的代码示例来深入理解其...
在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时,主要涉及两个关键属性:`selectionStart`和`selectionEnd`,以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...
本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> [removed][removed] [removed] $(function() { /* 在textarea处插入文本--...
标题中的"javascript控制在光标位置插入文字适合表情的插入"描述了一种使用JavaScript实现的功能,即在文本框(textarea)的当前光标位置插入特定的文字或表情。这个功能常见于许多聊天应用或编辑器中,允许用户在...
jQuery textArea文本光标全功能插件,可以获取光标位置,向光标文字插入文本,高亮显示指定的文本块
记得做前端这一块,很多时候需要判断textarea输入框下的光标位置 比如要在输入的文档中插入一些表情符号,图片之类的,这个时候在插入文字之前, 就需要先判断光标的位置了。今天就特意给大家推荐这样一个小...
其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后使用正则表达式判断输入内容。还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航",核心...
1. **焦点光标位置**:当用户在文本框中输入时,光标所在的位置就是焦点位置。这可以帮助我们判断用户当前正在输入的位置,以便进行相应的处理。 2. **选中起始位置**:这是用户选择的文本块的起始字符位置。例如,...
在HTML的可编辑元素(如`<input>`、`<textarea>`)中,光标位置表示用户正在输入或编辑文字的地方。通过JavaScript,我们可以获取或设置这个位置,从而实现更复杂的用户交互。 在jQuery中,没有直接的方法来获取或...
4. **多行文本支持**:考虑到HTML5的`<textarea>`元素支持多行输入,插件应能处理这种情况,正确计算和设置在多行文本中的光标位置。 5. **兼容性**:良好的插件会确保其在各种浏览器(包括主流的Chrome、Firefox、...
这个简单的Vue与HTML结合的示例展示了如何在用户输入时实时获取textarea中的选中文本和光标位置。在实际项目中,你可以根据需求扩展这个功能,比如增加字符计数、格式检查或其他高级功能。通过Vue.js的强大功能和...
在JavaScript中,向文本输入框或者富文本编辑器在光标位置插入特定内容是一项常见的需求。这涉及到对DOM(文档对象模型)的操作以及对文本选取的理解。以下将详细阐述实现这个功能所需的知识点。 首先,我们需要...
特别是在交互式应用中,我们经常需要获取或设置用户输入时的光标位置、选中文字的起始和终止位置,以及获取选中的文字内容。这些功能可以帮助我们实现更丰富的用户交互体验,比如自动补全、高亮显示等。以下是对这些...
2. **插入文本**:根据光标位置插入新文本。 3. **兼容性处理**:确保代码能够在不同版本的浏览器中正常运行。 #### 三、技术实现细节 ##### 1. 获取光标位置 - **IE浏览器**:使用`createTextRange()`方法创建...
例如,用户在输入文字时,点击表情图标,可以调用这个方法在光标所在位置插入相应的表情符号。 总结,通过使用jQuery的`insertAtCaret`方法,我们可以方便地在textarea元素中根据用户的需求在指定位置插入字符或...
在光标位置插入文本 用文字替换所选范围 处理浏览器之间的行尾差异 选择/取消选择任何元素中的所有文本 原料药 脱字号 $.fn.caret() 在单个点上询问并操纵输入字段的光标位置,而无需选择任何文本。 .caret()返回...
在JavaScript中,向输入域(例如文本框或文本区域)的光标所在位置插入字符串是一项常见的操作,这对于实现各种功能,如自动补全、格式化输入等非常有用。本篇文章将详细讲解如何利用JavaScript实现这一功能。 首先...