Javascript set and get methods Textarea cursor position
最新推荐文章于 2024-04-23 18:35:32 发布
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS Set the cursor position and access to Textarea </title>
<script>
var isIE = !(!document.all);
function posCursor(){
var start=0,end=0;
var oTextarea = document.getElementById("textarea");
if(isIE){
//selection Select the active area, a block of text that is highlighted , And / or text which users can perform certain operations of the other elements .
//createRange Select the area from the current text object to create TextRange ,
// Select the area or from the control collection is created controlRange .
var sTextRange= document.selection.createRange();
// Determine the object selected is not textarea
if(sTextRange.parentElement()== oTextarea){
// Create a TextRange object
var oTextRange = document.body.createTextRange();
// Range of mobile text to the beginning and end of the range to fully contain the text of a given element .
oTextRange.moveToElementText(oTextarea);
// Then get two TextRange
//oTextRange Text field (textarea) Chinese version of the object TextRange
//sTextRange TextRange text is selected the object region
//compareEndPoints Introduce, compareEndPoints method is used to compare two TextRange Position of the object
//StartToEnd Comparing the beginning and the parameters TextRange TextRange The end of the .
//StartToStart Comparing the beginning and the parameters TextRange TextRange The beginning of the .
//EndToStart Compared with the parameters at the end TextRange TextRange The beginning of the .
//EndToEnd Compared with the parameters at the end TextRange TextRange The end of the .
//moveStart Method of introduction, the scope of the beginning of the change
//character Moved by the character
//word Move by word
//sentence Moved by the sentence
//textedit Start editing action
// Here we compare the oTextRange and sTextRange The beginning, the beginning to the selected location of the region
for (start=0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++){
oTextRange.moveStart('character', 1);
}
// Need to calculate \n The number of ( The way characters move by excluding \n, So here together )
for (var i = 0; i <= start; i ++){
if (oTextarea.value.charAt(i) == '\n'){
start++;
}
}
// In calculating the position of one end of the
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(" Location of input errors ");
}
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" size="3" value="0"/></td>
<td>end: <input type="text" size="3" value="0"/></td>
</tr>
<tr>
<td colspan="2">
<textarea
onKeydown="posCursor()"
onKeyup="posCursor()"
οnmοusedοwn="posCursor()"
οnmοuseup="posCursor()"
rows="14"
cols="50"> Poppy
Chunhuaqiuyue when the living memories .
Fashion goes in cycles east, my country next month in the bitterly painful !
L bar carved jade puzzle should still , Force is changed .
Memories can be your misery? Is like a Spring River Flows East .</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value=" Set cursor position "/></td>
</tr>
</table>
</body>
</html>