當(dāng)前位置：
首頁(yè) >
javascript获取textarea中光标的位置 兼容
發(fā)布時(shí)間：2025/4/16
57
豆豆
生活随笔
收集整理的這篇文章主要介紹了
javascript获取textarea中光标的位置 兼容
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
代碼 ?1?var?start=0;?
?2?var?end=0;?
?3?function?add(){?
?4?var?textBox?=?document.getElementById("ta");?
?5?var?pre?=?textBox.value.substr(0,?start);?
?6?var?post?=?textBox.value.substr(end);?
?7?textBox.value?=?pre?+?document.getElementById("inputtext").value?+?post;?
?8?}?
?9?function?savePos(textBox){?
10?//如果是Firefox(1.5)的話(huà)，方法很簡(jiǎn)單?
11?if(typeof(textBox.selectionStart)?==?"number"){?
12?start?=?textBox.selectionStart;?
13?end?=?textBox.selectionEnd;?
14?}?
15?//下面是IE(6.0)的方法，麻煩得很，還要計(jì)算上'\n'?
16?else?if(document.selection){?
17?var?range?=?document.selection.createRange();?
18?if(range.parentElement().id?==?textBox.id){?
19?//?create?a?selection?of?the?whole?textarea?
20?var?range_all?=?document.body.createTextRange();?
21?range_all.moveToElementText(textBox);?
22?//兩個(gè)range，一個(gè)是已經(jīng)選擇的text(range)，一個(gè)是整個(gè)textarea(range_all)?
23?//range_all.compareEndPoints()比較兩個(gè)端點(diǎn)，如果range_all比range更往左(further?to?the?left)，則?//返回小于0的值，則range_all往右移一點(diǎn)，直到兩個(gè)range的start相同。?
24?//?calculate?selection?start?point?by?moving?beginning?of?range_all?to?beginning?of?range?
25?for?(start=0;?range_all.compareEndPoints("StartToStart",?range)?<?0;?start++)?
26?range_all.moveStart('character',?1);?
27?//?get?number?of?line?breaks?from?textarea?start?to?selection?start?and?add?them?to?start?
28?//?計(jì)算一下\n?
29?for?(var?i?=?0;?i?<=?start;?i?++){?
30?if?(textBox.value.charAt(i)?==?'\n')?
31?start++;?
32?}?
33?//?create?a?selection?of?the?whole?textarea?
34?var?range_all?=?document.body.createTextRange();?
35?range_all.moveToElementText(textBox);?
36?//?calculate?selection?end?point?by?moving?beginning?of?range_all?to?end?of?range?
37?for?(end?=?0;?range_all.compareEndPoints('StartToEnd',?range)?<?0;?end?++)?
38?range_all.moveStart('character',?1);?
39?//?get?number?of?line?breaks?from?textarea?start?to?selection?end?and?add?them?to?end?
40?for?(var?i?=?0;?i?<=?end;?i?++){?
41?if?(textBox.value.charAt(i)?==?'\n')?
42?end?++;?
43?}?
44?}?
45?}?
46?document.getElementById("start").value?=?start;?
47?document.getElementById("end").value?=?end;?
48?}?
49?
50?
?2?<table?border="1"?cellspacing="0"?cellpadding="0">?
?3?<tr>?
?4?<td>start:?<input?type="text"?id="start"?size="3"/></td>?
?5?<td>end:?<input?type="text"?id="end"?size="3"/></td>?
?6?</tr>?
?7?<tr>?
?8?<td?colspan="2">?
?9?<textarea?id="ta"?onKeydown="savePos(this)"?
10?onKeyup="savePos(this)"?
11?onmousedown="savePos(this)"?
12?onmouseup="savePos(this)"?
13?onfocus="savePos(this)"?
14?rows="14"?cols="50"></textarea>?
15?</td>?
16?</tr>?
17?<tr>?
18?<td><input?type="text"?id="inputtext"?/></td>?
19?<td><input?type="button"?onClick="add()"?value="Add?Text"/></td>?
20?</tr>?
21?</table>?
22?</form>?
23?
24?
?2?var?end=0;?
?3?function?add(){?
?4?var?textBox?=?document.getElementById("ta");?
?5?var?pre?=?textBox.value.substr(0,?start);?
?6?var?post?=?textBox.value.substr(end);?
?7?textBox.value?=?pre?+?document.getElementById("inputtext").value?+?post;?
?8?}?
?9?function?savePos(textBox){?
10?//如果是Firefox(1.5)的話(huà)，方法很簡(jiǎn)單?
11?if(typeof(textBox.selectionStart)?==?"number"){?
12?start?=?textBox.selectionStart;?
13?end?=?textBox.selectionEnd;?
14?}?
15?//下面是IE(6.0)的方法，麻煩得很，還要計(jì)算上'\n'?
16?else?if(document.selection){?
17?var?range?=?document.selection.createRange();?
18?if(range.parentElement().id?==?textBox.id){?
19?//?create?a?selection?of?the?whole?textarea?
20?var?range_all?=?document.body.createTextRange();?
21?range_all.moveToElementText(textBox);?
22?//兩個(gè)range，一個(gè)是已經(jīng)選擇的text(range)，一個(gè)是整個(gè)textarea(range_all)?
23?//range_all.compareEndPoints()比較兩個(gè)端點(diǎn)，如果range_all比range更往左(further?to?the?left)，則?//返回小于0的值，則range_all往右移一點(diǎn)，直到兩個(gè)range的start相同。?
24?//?calculate?selection?start?point?by?moving?beginning?of?range_all?to?beginning?of?range?
25?for?(start=0;?range_all.compareEndPoints("StartToStart",?range)?<?0;?start++)?
26?range_all.moveStart('character',?1);?
27?//?get?number?of?line?breaks?from?textarea?start?to?selection?start?and?add?them?to?start?
28?//?計(jì)算一下\n?
29?for?(var?i?=?0;?i?<=?start;?i?++){?
30?if?(textBox.value.charAt(i)?==?'\n')?
31?start++;?
32?}?
33?//?create?a?selection?of?the?whole?textarea?
34?var?range_all?=?document.body.createTextRange();?
35?range_all.moveToElementText(textBox);?
36?//?calculate?selection?end?point?by?moving?beginning?of?range_all?to?end?of?range?
37?for?(end?=?0;?range_all.compareEndPoints('StartToEnd',?range)?<?0;?end?++)?
38?range_all.moveStart('character',?1);?
39?//?get?number?of?line?breaks?from?textarea?start?to?selection?end?and?add?them?to?end?
40?for?(var?i?=?0;?i?<=?end;?i?++){?
41?if?(textBox.value.charAt(i)?==?'\n')?
42?end?++;?
43?}?
44?}?
45?}?
46?document.getElementById("start").value?=?start;?
47?document.getElementById("end").value?=?end;?
48?}?
49?
50?
?
?
?
代碼 ?1?<form?action="a.cgi">??2?<table?border="1"?cellspacing="0"?cellpadding="0">?
?3?<tr>?
?4?<td>start:?<input?type="text"?id="start"?size="3"/></td>?
?5?<td>end:?<input?type="text"?id="end"?size="3"/></td>?
?6?</tr>?
?7?<tr>?
?8?<td?colspan="2">?
?9?<textarea?id="ta"?onKeydown="savePos(this)"?
10?onKeyup="savePos(this)"?
11?onmousedown="savePos(this)"?
12?onmouseup="savePos(this)"?
13?onfocus="savePos(this)"?
14?rows="14"?cols="50"></textarea>?
15?</td>?
16?</tr>?
17?<tr>?
18?<td><input?type="text"?id="inputtext"?/></td>?
19?<td><input?type="button"?onClick="add()"?value="Add?Text"/></td>?
20?</tr>?
21?</table>?
22?</form>?
23?
24?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/mslove/archive/2010/03/30/1700640.html
總結(jié)
以上是生活随笔為你收集整理的javascript获取textarea中光标的位置 兼容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JavaScript操作文件(2)
- 下一篇： javascript 的观察者模式的原理