當前位置:編程學習大全網 - 源碼下載 - 我的textarea點擊壹下,寫字的光標就在中間部位,怎麽把光標移到前面去?

我的textarea點擊壹下,寫字的光標就在中間部位,怎麽把光標移到前面去?

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>

  • 上一篇:ROC指標的應用技巧
  • 下一篇:基於NB-IOT窄帶物聯網智能路燈雲端控制系統的設計與實現
  • copyright 2024編程學習大全網