1. setCaretPos(element, pos)就是将光标设置在element元素的pos位置
2. 键盘监听
a, 获取当前光标位置
b, 将当前位置后面的那个 _ 去掉(这里面要取原文本, 然后处理, 然后结果写到textarea中, 注意, 此时textarea的光标在最后位置, 所以又第三步)
c, 将光标定位到原当前位置
然后键盘输入自然会在光标的后面位置, 也就是实现了insert功能
我在firefox, ie9下测试通过, 使用了jquery去取dom元素, 如果没
Javascript设置和获取Textarea的光标位置的方法，可定位光标到某个位置：
效果如图：
源码：
<html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>JS设置及获取Textarea的光标位置</title>
<script>
var isIE = !(!document.all)
function posCursor(){
var start=0,end=0
var oTextarea = document.getElementById("textarea")
if(isIE){
//selection 当前激活选中区，即高亮文本块，和/或文当中用户可执行某些 *** 作的其它元素。
//createRange 从当前文本选中区中创建 TextRange 对象，
//或从控件选中区中创建 controlRange 集合。
var sTextRange= document.selection.createRange()
//判断选中的是不是textarea对象
if(sTextRange.parentElement()== oTextarea){
//创建一个TextRange对象
var oTextRange = document.body.createTextRange()
//移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。
oTextRange.moveToElementText(oTextarea)
//此时得到两个 TextRange
//oTextRange文本域(textarea)中文本的TextRange对象
//sTextRange是选中区域文本的TextRange对象
//compareEndPoints方法介绍，compareEndPoints方法用于比较两个TextRange对象的位置
//StartToEnd 比较TextRange开头与参数TextRange的末尾。
//StartToStart比较TextRange开头与参数TextRange的开头。
//EndToStart 比较TextRange末尾与参数TextRange的开头。
//EndToEnd 比较TextRange末尾与参数TextRange的末尾。
//moveStart方法介绍，更改范围的开始位置
//character 按字符移动
//word 按单词移动
//sentence 按句子移动
//textedit 启动编辑动作
//这里我们比较oTextRange和sTextRange的开头，的到选中区域的开头位置
for (start=0 oTextRange.compareEndPoints("StartToStart", sTextRange) < 0 start++){
oTextRange.moveStart('character', 1)
}
//需要计算一下\n的数目(按字符移动的方式不计\n,所以这里加上)
for (var i = 0 i <= start i ++){
if (oTextarea.value.charAt(i) == '\n'){
start++
}
}
//再计算一次结束的位置
oTextRange.moveToElementText(oTextarea)
for (end = 0 oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0 end ++){
oTextRange.moveStart('character', 1)
}
for (var i = 0 i <= end i ++){
if (oTextarea.value.charAt(i) == '\n'){
end++
}
}
}
}else{
start = oTextarea.selectionStart
end = oTextarea.selectionEnd
}
document.getElementById("start").value = start
document.getElementById("end").value = end
}
function moveCursor(){
var oTextarea = document.getElementById("textarea")
var start = parseInt(document.getElementById("start").value)
var end = parseInt(document.getElementById("end").value)
if(isNaN(start)||isNaN(end)){
alert("位置输入错误")
}
if(isIE){
var oTextRange = oTextarea.createTextRange()
var LStart = start
var LEnd = end
var start = 0
var end = 0
var value = oTextarea.value
for(var i=0 i<value.length && i<LStart i++){
var c = value.charAt(i)
if(c!='\n'){
start++
}
}
for(var i=value.length-1 i>=LEnd && i>=0 i--){
var c = value.charAt(i)
if(c!='\n'){
end++
}
}
oTextRange.moveStart('character', start)
oTextRange.moveEnd('character', -end)
//oTextRange.collapse(true)
oTextRange.select()
oTextarea.focus()
}else{
oTextarea.select()
oTextarea.selectionStart=start
oTextarea.selectionEnd=end
}
}
</script>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>start: <input type="text" id="start" size="3" value="0"/></td>
<td>end: <input type="text" id="end" size="3" value="0"/></td>
</tr>
<tr>
<td colspan="2">
<textarea id="textarea"
onKeydown="posCursor()"
onKeyup="posCursor()"
onmousedown="posCursor()"
onmouseup="posCursor()"
onfocus="posCursor()"
rows="14"
cols="50">虞美人
春花秋月何时了，往事知多少。
小楼昨夜又东风，故国不堪回首月明中！
雕l栏玉砌应犹在，只是朱颜改。
问君能有几多愁？恰似一江春水向东流。</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" onClick="moveCursor()" value="设置光标位置"/></td>
</tr>
</table>
</body>
</html>
解决方案1：jTextArea1
好像就这两个函数吧.setSelectionEnd(pos)。jTextArea1.setSelectionStart(pos)
解决方案2：
a.requestFocus
你看看textArea的属性里有
如果你是刚刚打开一个窗口就要让textArea获得焦点，可以在打开窗口的事件里添加a。requesFocus
解决方案3：
setSelectionStart
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）