Javascript设立和获取Textarea的光标位置的方法
日期：2014-05-16 浏览次数：20368 次
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&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
