Jquery 向TextArea中光标处插入字符串

jQuery #textarea #光标 #字符串2012-04-30 09:33

先上jquery的代码：

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; 
        } 
    } 
});

例子：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script type="text/javascript" src="./jquery.caretInsert.js"></script> 
</head> 
<body> 
    <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(); 
        }
    ); 
})($); 
 
</script> 
</body>
</html>

jQuery 教程

jQuery 效果

jQuery HTML

jQuery 遍历

jQuery AJAX

jQuery 杂项

jQuery 实例

jQuery 参考手册

jQuery Mobile

Jquery 向TextArea中光标处插入字符串

相关文章