Javascript設置和獲取Textarea的光標位置的方法,可定位光標到某個位置:
效果如圖:
源碼:
<html><head>?<meta?pareEndPoints方法介紹,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>