jquery.caretInsert.js :
Code
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代码段 :
Code
1
<!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<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6<script type="text/javascript"
7 src="http://code.jquery.com/jquery-latest.pack.js"></script>
8<script type="text/javascript"
9 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<script language="JavaScript" type="text/javascript">
18
(function($){
19
$('#hello').setCaret();
20 $('#insertA').click(function(){
21 $('#hello').insertAtCaret($('#item').text());
22
});
23
24 $('#world').setCaret();
25 $('#insertT').click(function(){
26 $('#world').insertAtCaret($('#item').text());
27 });
28
29 $('#item').hover(
30 function(){
31 $(this).selectContents();
32 },
33 function(){
34 $.unselectContents();
35 });
36})($);
37
38</script>
39</body></html>
40
CodejQuery.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代码段 :
Code1
<!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
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6
<script type="text/javascript" 7
src="http://code.jquery.com/jquery-latest.pack.js"></script> 8
<script type="text/javascript" 9
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
<script language="JavaScript" type="text/javascript"> 18
(function($){ 19
$('#hello').setCaret(); 20
$('#insertA').click(function(){ 21
$('#hello').insertAtCaret($('#item').text()); 22
}); 23
24
$('#world').setCaret(); 25
$('#insertT').click(function(){ 26
$('#world').insertAtCaret($('#item').text()); 27
}); 28
29
$('#item').hover( 30
function(){ 31
$(this).selectContents(); 32
}, 33
function(){ 34
$.unselectContents(); 35
}); 36
})($); 37
38
</script> 39
</body></html> 40
