jQuery实现在光标处插入文本

最新推荐文章于 2018-12-13 16:32:14 发布

zhaosoft1982

最新推荐文章于 2018-12-13 16:32:14 发布

阅读量2.9k

点赞数

分类专栏： jquery 文章标签： jquery function button javascript

本文链接：https://blog.csdn.net/zxl315/article/details/4490787

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery.caretInsert.js :

jQuery.extend({
    /**
     * 清除当前选择内容
     */
    unselectContents: function(){
        if(window.getSelection)
            window.getSelection().removeAllRanges();
        else if(document.selection)
            document.selection.empty();
    }
});
jQuery.fn.extend({
    /**
     * 选中内容
     */
    selectContents: function(){
        $(this).each(function(i){
            var node = this;
            var selection, range, doc, win;
            if ((doc = node.ownerDocument) &&
                (win = doc.defaultView) &&
                typeof win.getSelection != 'undefined' &&
                typeof doc.createRange != 'undefined' &&
                (selection = window.getSelection()) &&
                typeof selection.removeAllRanges != 'undefined')
            {
                range = doc.createRange();
                range.selectNode(node);
                if(i == 0){
                    selection.removeAllRanges();
                }
                selection.addRange(range);
            }
            else if (document.body &&
                     typeof document.body.createTextRange != 'undefined' &&
                     (range = document.body.createTextRange()))
            {
                range.moveToElementText(node);
                range.select();
            }
        });
    },
    /**
     * 初始化对象以支持光标处插入内容
     */
    setCaret: function(){
        if(!$.browser.msie) return;
        var initSetCaret = function(){
            var textObj = $(this).get(0);
            textObj.caretPos = document.selection.createRange().duplicate();
        };
        $(this)
        .click(initSetCaret)
        .select(initSetCaret)
        .keyup(initSetCaret);
    },
    /**
     * 在当前对象光标处插入指定的内容
     */
    insertAtCaret: function(textFeildValue){
       var textObj = $(this).get(0);
       if(document.all && textObj.createTextRange && textObj.caretPos){
           var caretPos=textObj.caretPos;
           caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?
                               textFeildValue+'' : textFeildValue;
       }
       else if(textObj.setSelectionRange){
           var rangeStart=textObj.selectionStart;
           var rangeEnd=textObj.selectionEnd;
           var tempStr1=textObj.value.substring(0,rangeStart);
           var tempStr2=textObj.value.substring(rangeEnd);
           textObj.value=tempStr1+textFeildValue+tempStr2;
           textObj.focus();
           var len=textFeildValue.length;
           textObj.setSelectionRange(rangeStart+len,rangeStart+len);
           textObj.blur();
       }
       else {
           textObj.value+=textFeildValue;
       }
    }
});

demo代码段 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
4

<head>
5

src="http://code.jquery.com/jquery-latest.pack.js"></script>
8

src="./jquery.caretInsert.js"></script>
10

</head>
11

<body>
12

<div><span id="item">TestText</span></div>
13

<div><input id="hello" type="text" style="width: 200px;" /></div>
14

<div><input type="button" value="Inert on input" id="insertA" /></div>
15

<div><textarea id="world" style="width: 200px;height:50px;"></textarea>
16

<div><input type="button" value="Inert on Textarea" id="insertT" /></div>
17

(function($){
19

$('#hello').setCaret();
20

$('#insertA').click(function(){
21

$('#hello').insertAtCaret($('#item').text());
22

});
23

$('#world').setCaret();
25

$('#insertT').click(function(){
26

$('#world').insertAtCaret($('#item').text());
27

});
28

$('#item').hover(
30

function(){
31

$(this).selectContents();
32

},
33

function(){
34

$.unselectContents();
35

});
36

})($);
37

</script>
39

</body></html>
40

zhaosoft1982

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
jQuery实现在光标处插入文本

jquery.caretInsert.js :CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->jQuery.extend({ /** * 清除当前选择内容 */ unselectContents
复制链接

扫一扫