網頁特效 獲取textarea 元素的游標位置代碼
<!doctype html>
<html xmlns="HTTP://www.w3.org/1999/xhtml">
<head>
<meta HTTP-equiv="content-type" content="text/html; charset=gb2312" />
<title>demo ： textarea 元素的游標位置</title>
<style>
#result {
font-size:18px;
line-height:25px;
padding-left:20px;
}
</style>
</head>
<body>
<h1>textarea 元素的游標位置</h1>
<ul>
<li>獲取 textarea 元素當前的游標位置</li>
<li>設置回原先的 textarea 元素的游標位置</li>
<li>在 textarea 元素的游標位置插入文本</li>
</ul>
<form action="#">
<textarea id="test" rows="8" cols="50"></textarea>
<p>
<input type="button" id="get" value="get cursor position"/>
<input type="button" id="set" value="set cursor position"/>
<input type="button" id="add" value="add text after cursor position"/>
</p>
</form>
<h2>textarea range：</h2>
<div id="result"></div>
<script type="text/javascript">
/**
* cursorposition object
*
* created by blank zheng on 2010/11/12.
* copyright (c) 2010 planabc.net. all rights reserved.
*
* the copyrights embodied in the content of this file are licensed under the bsd (revised) open source license.
*/
var cursorposition = {
get: function (textarea) {
var rangedata = {text: "", start: 0, end: 0 };
if (textarea.setselectionrange) { // w3c
textarea.focus();
rangedata.start= textarea.selectionstart;
rangedata.end = textarea.selectionend;
rangedata.text = (rangedata.start != rangedata.end) ? textarea.value.substring(rangedata.start, rangedata.end): "";
} else if (document.selection) { // ie
textarea.focus();
var i,
os = document.selection.createrange(),
don't: or = textarea.createtextrange()
or = document.body.createtextrange();
or.movetoelementtext(textarea);
rangedata.text = os.text;
rangedata.bookmark = os.getbookmark();
// object.movestart(sunit [, icount])
// return value: integer that returns the number of units moved.
for (i = 0; or.compareendpoints('starttostart', os) < 0 && os.movestart("character", -1) !== 0; i ++) {
// why? you can alert(textarea.value.length)
if (textarea.value.charat(i) == 'n') {
i ++;
}
}
rangedata.start = i;
rangedata.end = rangedata.text.length + rangedata.start;
if(!rangedata.text) {
}
}
return rangedata;
},
set: function (textarea, rangedata) {
var or;
if(!rangedata) {
alert("you must get cursor position first.")
}
textarea.focus();
if (textarea.setselectionrange) { // w3c
textarea.setselectionrange(rangedata.start, rangedata.end);
} else if (textarea.createtextrange) { // ie
or = textarea.createtextrange();
/*// fixbug : ues movetobookmark()
// in ie, if cursor position at the end of textarea, the setcursorposition function don't work
if(textarea.value.length === rangedata.start) {
or.collaps教程e(false)
or.select();
} else {
or.movetobookmark(rangedata.bookmark);
or.select();
}*/
or.movestart('character', rangedata.start);
or.moveend('character', rangedata.end - textarea.value.length);
or.select();
}
},
add: function (textarea, rangedata, text) {
var ovalue, nvalue, or, sr, nstart, nend, st;
t his.set(textarea, rangedata);
if (textarea.setselectionrange) { // w3c
ovalue = textarea.value;
; nvalue = ovalue.substring(0, rangedata.start) + text + ovalue.substring(rangedata.end);
nstart = nend = rangedata.start + text.length;
st = textarea.scrolltop;
textarea.value = nvalue;
// fixbug:
// after textarea.values = nvalue, scrolltop value to 0
if( textarea.scrolltop != st) {
textarea.scrolltop = st;
}
textarea. setselectionrange(nstart, nend);
} else if (textarea.createtextrange) { // ie
sr = document.selection.createrange();
; sr.text = text;
sr.setendpoint('starttoend', sr);
sr.select();
}
}
}
var tx=document.getelementbyid("test"),
re=document.getelementbyid("result"),
pos;
document.getelementbyid("get").onclick = function(){
alert(tx.value.length);
pos = cursorposition.get(tx);
re.innerhtml=("<strong>range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>text :&l t;/strong> " + (!pos.text ? ' --': pos.text));
}
document.getelementbyid("set").onclick = function(){
cursorposition.set(tx, pos);
}
document.getelementbyid("add").onclick = function(){
cursorposition.add(tx, pos, input = prompt("你想插入替換的文本：",""));
}
</script>
</body>
</html>
首先，我們用 rangedata 物件作為資料存儲，並獲得焦點：
var rangedata = {start: 0, end: 0, text: "" };textarea.focus();對於非 ie 瀏覽器獲取選區的起始和末尾位置其實非常容易：
rangedata.start= el.selectionstart;rangedata.end = el.selectionend;通過截取我們可以得到游標的選區內容：
rangedata.text = (rangedata.start != rangedata.end) ? el.value.substring(rangedata.start, rangedata.end): "";而對於 ie 瀏覽器處理起來就比較麻煩了，但我們依舊可以獲取到選區：
os = document.selection.createrange();同時還可獲取 textarea 元素的選區：
為了使 or 與 os 在同一等級上比較，請勿使用：or = textarea.createtextrange()or = document.body.createtextrange();or.movetoelementtext( textarea);如果游標在 textarea 元素內，很自然 os.text 就是我們需要的選區內容：
rangedata.text = os.text;並且我們可以通過 os.getbookmark() 方法獲取到選區的位置資料，該位置資料可以通過 movetobookmark() 方法設置回去。
getbookmark: retrieves a bookmark (opaque string) that can be used with movetobookmark to return to the same range.
movetobookmark: moves to a bookmark.
我們用 rangedata.bookmark 來記錄該位置資料：
rangedata.bookmark = os.getbookmark();下面是最重要的步驟：我們比較 or 與 os 的選區起始位置（使用 object.compareendpoints(stype, orange) 方法比較），如果 or 的起始位置在 os 之前，我們向前移動 os 的起始位置1個字元（使用 object.movestart(sunit [, icount]) 方法移動），一直當 os 的起始位置在 or 之前停止，移動的位置，則是選區的起始位置。
compareendpoints: compares an end point of a textrange object with an end point of another range.
movestart: changes the start position of the range.
for (i = 0; or.compareendpoints('starttostart', os) < 0 && os.movestart("character", -1) !== 0; i ++) {}rangeda ta.start = i;但由於在 ie 中，textarea 元素中的所有分行符號都占 1 個字元，可以通過 alert(textarea.value.length) 查看，故要對上面的代碼做部分處理：
for (i = 0; or.compareendpoints('starttostart', os) < 0 && os.movestart("character", -1) !== 0; i ++) { // w hy? you can alert(textarea.value.length) if (textarea.value.charat(i) == 'n') { i ++; }}rangedata.start = i;既然得到了選區的起始位置和選區字串的字元，很自然我們可以計算得到選區的末尾位置：
rangedata.end = rangedata.text.length + rangedata.start;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
