用Javascript在编辑框和TextArea的光标处插入文字，支持连续插入
001<html>
002
003
<head>
004
005
<title>Test of inserting characters at cursor position</title>
006
007
<script type="text/javascript" src="jquery.pack.js"></script>
008
009
<script>
010
011
function setCaret(textObj){
012
013
if(textObj.createTextRange){
014
015
textObj.caretPos=document.selection.createRange().duplicate();
016
017
}
018
019
}
020
021
function insertAtCaret(textObj,textFeildValue){
022
023
if(document.all&&textObj.createTextRange&&textObj.caretPos){
024
025
var caretPos=textObj.caretPos;
026
027
caretPos.text=caretPos.text.charAt(caretPos.text.length-1)==''?textFeildValue+'':textFeildValue;
028
029
}else if(textObj.setSelectionRange){
030
031
var rangeStart=textObj.selectionStart;
032
033
var rangeEnd=textObj.selectionEnd;
034
035
var tempStr1=textObj.value.substring(0,rangeStart);
036
037
var tempStr2=textObj.value.substring(rangeEnd);
038
039
textObj.value=tempStr1+textFeildValue+tempStr2;
040
041
textObj.focus();
042
043
var len=textFeildValue.length;
044
045
textObj.setSelectionRange(rangeStart+len,rangeStart+len);
046
047
textObj.blur();
048
049
}else {
050
051
textObj.value+=textFeildValue;
052
053
}
054
055
}
056
057
$(document).ready(function(){
058
059
if($.browser.msie){
060
061
$("#tag")
062
063
.click(function(){
064
065
setCaret($(this).get(0));
066
067
})
068
069
.select(function(){
070
071
setCaret($(this).get(0));
072
073
})
074
075
.keyup(function(){
076
077
setCaret($(this).get(0));
078
079
});
080
081
$("#tagA")
082
083
.click(function(){
084
085
setCaret($(this).get(0));
086
087
})
088
089
.select(function(){
090
091
setCaret($(this).get(0));
092
093
})
094
095
.keyup(function(){
096
097
setCaret($(this).get(0));
098
099
});
100
101
}
102
103
$("a.insertTag")
104
105
.click(function(){
106
107
insertAtCaret($("#tag").get(0),$(this).html());
108
109
});
110
111
$("a.insertTagA")
112
113
.click(function(){
114
115
insertAtCaret($("#tagA").get(0),$(this).html());
116
117
});
118
119
});
120
121
</script>
122
123
</head>
124
125
<body>
126
127
References:<br/>
128
129
http://www.dnew.cn/post/287.htm<br/>
130
131
http://blog.vishalon.net/Post/57.aspx
132
133
<div>
134
135
<form>
136
137
<input type="text" id="tag" value="testtesttest" size="50" /><br/>
138
139
<a class="insertTag" href="javascript:void(0)">tag1</a>
140
141
<a class="insertTag" href="javascript:void(0)">tag2</a>
142
143
<br/>
144
145
<textarea id="tagA" style="width:300px;height:120px;" >tttttt tttt</textarea><br/>
146
147
<a class="insertTagA" href="javascript:void(0)">tag3</a>
148
149
<a class="insertTagA" href="javascript:void(0)">tag4</a>
150
151
</form>
152
153
154
155
</div>
156
157
</body>
158
159
</html>
摘自 JSON
补充：web前端 , JavaScript ,
