當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript获取textarea中光标的位置 兼容
生活随笔
收集整理的這篇文章主要介紹了
javascript获取textarea中光标的位置 兼容
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼 ?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)的話,方法很簡單?
11?if(typeof(textBox.selectionStart)?==?"number"){?
12?start?=?textBox.selectionStart;?
13?end?=?textBox.selectionEnd;?
14?}?
15?//下面是IE(6.0)的方法,麻煩得很,還要計算上'\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?//兩個range,一個是已經選擇的text(range),一個是整個textarea(range_all)?
23?//range_all.compareEndPoints()比較兩個端點,如果range_all比range更往左(further?to?the?left),則?//返回小于0的值,則range_all往右移一點,直到兩個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?//?計算一下\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)的話,方法很簡單?
11?if(typeof(textBox.selectionStart)?==?"number"){?
12?start?=?textBox.selectionStart;?
13?end?=?textBox.selectionEnd;?
14?}?
15?//下面是IE(6.0)的方法,麻煩得很,還要計算上'\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?//兩個range,一個是已經選擇的text(range),一個是整個textarea(range_all)?
23?//range_all.compareEndPoints()比較兩個端點,如果range_all比range更往左(further?to?the?left),則?//返回小于0的值,則range_all往右移一點,直到兩個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?//?計算一下\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?
?
?
轉載于:https://www.cnblogs.com/mslove/archive/2010/03/30/1700640.html
總結
以上是生活随笔為你收集整理的javascript获取textarea中光标的位置 兼容的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript操作文件(2)
- 下一篇: 根据表达式的值,选择field中的值