`
deng131
  • 浏览: 661787 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

textarea光标位置插入文字

阅读更多
各浏览器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/
分享到:
评论

相关推荐

    在textarea光标处插入文本

    在textarea光标处插入文本

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    JS在TextArea光标位置插入文字+移动光标到文字末尾,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性,具体实现如下,感兴趣的朋友可以参考下哈

    jQuery往textarea中光标所在位置插入文本的方法

    本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> [removed][removed] [removed] $(function() { /* 在textarea处插入文本--...

    jQueryCursorPlugIn.js textArea文本光标全功能插件

    jQuery textArea文本光标全功能插件,可以获取光标位置,向光标文字插入文本,高亮显示指定的文本块

    jQuery.curpos.js插件获textarea输入框下光标的位置

    记得做前端这一块,很多时候需要判断textarea输入框下的光标位置 比如要在输入的文档中插入一些表情符号,图片之类的,这个时候在插入文字之前, 就需要先判断光标的位置了。今天就特意给大家推荐这样一个小...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容、兼容IE8,很好的例子!

    javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入。 在实现表情的插入时用到了。 代码如下: <span xss=removed><html> <head> [removed] function test(str){ var tc = document.getElementById(“mytextarea”); ...

    jquery.caret:jQuery插件来操纵输入和textarea元素的插入符位置和选择范围

    在光标位置插入文本 用文字替换所选范围 处理浏览器之间的行尾差异 选择/取消选择任何元素中的所有文本 原料药 脱字号 $.fn.caret() 在单个点上询问并操纵输入字段的光标位置,而无需选择任何文本。 .caret()返回...

    在可编辑div中插入文字或图片解决思路与实现步骤

    最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,... 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。 由于火狐等标准浏览器支持getSelectio

    Selection:处理textarea的选择与选择获取,插入字符等相关操作的小类库

    指定位置插入字符 连续插入字符 #二、使用 加方框的为可选参数,如:[end] ##2.1、获取选择范围util.Selection 传入参数 {Object} dom 原生textarea DOM对象 返回值 {Array} selection 当前选择情况 {Number} ...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 ...

    程序天下:JavaScript实例自学手册

    3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 ...

    xheditor v1.0.0 rc2 build 100401

    修正:IE浏览器下超链接的链接文字,在超链接是“http://”开头的情况下,输入“http://”开头文字无效的修正 修正:UBB模块中style="text-align:*"没转换成[align=*]问题的修正 修正:IE6下打开面板某些情况下会...

    xheditor-1.1.14

    参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后) pasteText:粘贴文本到编辑器当前光标处 参数1:要粘贴的文本,例:'这里的内容完全原样显示<strong>aaa...

    js使用小技巧

    ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"> 文本框的默认值 (this.defaultValue)"> title换行 obj.title = "123&#13sdfs&#32" 获得时间所代表的微秒 var n1 = new Date("2004-...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性(feedback:dk3214)。 +为表单字段增加RequiredMessage,MaxLengthMessage,MinLengthMessage属性,用于指定验证失败时提示信息。 ...

    ExtAspNet_v2.3.2_dll

    -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性(feedback:dk3214)。 +为表单字段增加RequiredMessage,MaxLengthMessage,MinLengthMessage属性,用于指定验证失败时提示信息。 ...

Global site tag (gtag.js) - Google Analytics