jQuery插件实现光标处插入文本

Javascript 1512 0 2012-12-25

jQuery插件实现光标处插入文本

<script language="javascript">
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;   
       }   
    }   
});
</script>

<div><span id="item">TestText</span></div>  
<div><input id="hello" type="text" style="width: 200px;" /></div>  
<div><input type="button" value="Inert on input" id="insertA" /></div>  
<div><textarea id="world" style="width: 200px;height:50px;"></textarea>  
<div><input type="button" value="Inert on Textarea" id="insertT" /></div> 

<script language="JavaScript" type="text/javascript">  
(function($){   
    $('#hello').setCaret();   
    $('#insertA').click(function(){   
        $('#hello').insertAtCaret($('#item').text());   
    });   
       
    $('#world').setCaret();   
    $('#insertT').click(function(){   
        $('#world').insertAtCaret($('#item').text());   
    });   
  
    $('#item').hover(   
    function(){   
        $(this).selectContents();   
    },   
    function(){   
        $.unselectContents();   
    });  
 
 $('#content').setCaret();   
    $('#face_yes').click(function(){   
        $('#content').insertAtCaret('ok');   
    });   
 
})($);   
</script>  

上一篇:jquery 刷新页面方法和一些javascript基础函数

下一篇:滚动返回顶部代码

讨论数量:0

请先登录再发表讨论。 2024-05-02

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链