您的位置：首页 > Web前端 > JQuery

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

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

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

viewsource

print?

1
if
(document.selection){
2
pos=document.selection.createRange();
3
pos.text=
"要插入的字符串"
;
4
}
Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

viewsource

print?

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下比较麻烦，要设置光标的位置，然后选中文字。

完整代码如下：

viewsource

print?

01
/**
02
*Createdby愚人码头.
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);
调用方式：

viewsource

print?

1
$(文本域选择器).insertContent(
"插入的内容"
);
2
$(文本域选择器).insertContent(
"插入的内容"
，数值);
//根据数值选中插入文本内容两边的边界
演示地址：http://www.css88.com/demo/insertContent/

声明:本文采用BY-NC-SA协议进行授权|WEB前端开发
转载请注明转自《【jQuery插件】insertContent-在文本框光标位置插入内容并选中》
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航