insertContent-在文本框光标位置插入内容并选中 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> insertContent-在文本框光标位置插入内容并选中

insertContent-在文本框光标位置插入内容并选中

浏览:2832次出处信息

在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。

IE下可以通过document.selection.createRange();获取光标位置，代码也很简单：

 
1
if (document.selection) { 

2
    pos = document.selection.createRange(); 

3
    pos.text = "要插入的字符串"; 

4
}

Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

 
1
if (obj.selectionStart || obj.selectionStart == '0') { //obj是文本框对象 

2
    var startPos = obj.selectionStart; 

3
    var endPos = obj.selectionEnd; 

4
    obj.value = obj.value.substring(0, startPos) + "要插入的字符串" + obj.value.substring(endPos, obj.value.length); 

5
    obj.selectionStart = startPos + myValue.length; 

6
    obj.selectionEnd = startPos + myValue.length; 

7
} else { 

8
    obj.value += "要插入的字符串"; 

9
}

这些可以查看Javascript在光标位置插入内容；

现在微博很火，我们可以尝试一下插入话题，你点击话题，在光标位置就会插入：#请在这里输入自定义话题#，注意，“请在这里输入自定义话题”这几文字是被选中，你可以直接敲打键盘编辑文本。
在火狐下先对比较简单，我们只要在上面的代码中插入一句就可以了：
obj.setSelectionRange(startPos-t,obj.selectionEnd+t);
t是根据数值选中插入文本内容两边的边界数值，如：0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。
但是在ie下比较麻烦，要设置光标的位置，然后选中文字。

完整代码如下：

01
/** 

02
 * Created by 愚人码头 . 

03
 * User: 愚人码头 

04
 * Date: 11-5-19 

05
 * Time: 上午10:24 

06
 * 更多查看http://www.css88.com/archives/3627 

07
 */

08
//在光标位置插入内容 

09
(function($) { 

10
    $.fn.extend({ 

11
        insertContent: function(myValue, t) { 

12
            var $t = $(this)[0]; 

13
            if (document.selection) { //ie 

14
                this.focus(); 

15
                var sel = document.selection.createRange(); 

16
                sel.text = myValue; 

17
                this.focus(); 

18
                sel.moveStart('character', -l); 

19
                var wee = sel.text.length; 

20
                if (arguments.length == 2) { 

21
                    var l = $t.value.length; 

22
                    sel.moveEnd("character", wee + t); 

23
                    t < = 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length); 

24
  
25
                    sel.select(); 

26
                } 

27
            } else if ($t.selectionStart || $t.selectionStart == '0') { 

28
                var startPos = $t.selectionStart; 

29
                var endPos = $t.selectionEnd; 

30
                var scrollTop = $t.scrollTop; 

31
                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length); 

32
                this.focus(); 

33
                $t.selectionStart = startPos + myValue.length; 

34
                $t.selectionEnd = startPos + myValue.length; 

35
                $t.scrollTop = scrollTop; 

36
                if (arguments.length == 2) { 

37
                    $t.setSelectionRange(startPos - t, $t.selectionEnd + t); 

38
                    this.focus(); 

39
                } 

40
            } 

41
            else { 

42
                this.value += myValue; 

43
                this.focus(); 

44
            } 

45
        } 

46
    }) 

47
})(jQuery);

调用方式：

 
1
$(文本域选择器).insertContent("插入的内容"); 

2
$(文本域选择器).insertContent("插入的内容"，数值); //根据数值选中插入文本内容两边的边界

演示地址：http://www.css88.com/demo/insertContent/

建议继续学习：

Vim光标移动 (阅读：3176)

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：网页审查工具介绍

后一篇：NodeList集合跟Array数组的区别 >>

文章信息

作者：愚人码头来源： WEB前端开发
标签： insertContent 光标
发布时间：2011-05-25 13:28:11

建议继续学习

Vim光标移动

近3天十大热文