[size=medium]IE下的Range操作比Mozilla下強很多,這裏只討論IE下的操作。
這裏選介紹幾個光標定位的特點:
[b]1.光標不變 [/b]
直接obj.focus(),光標會返回之前的位置,即位置不變
[b]2.光標在最前 [/b]
var r = obj.createTextRange();
r.collapse();
r.select();
用這個方法可以使光標在input框最前面
[b]3.光標在最後 [/b]var r = obj.createTextRange();
r.collapse(false);
r.select();
用這個方法可以使光標停在input框的最後
[b]4.選取input框中部分內容需要用到Range的moveStart或moveEnd方法, 其詳細的方法使用可以參考MSDN. [/b]
<script type="text/javascript">
function sl(o, m, n){
var rt = o.createTextRange();
rt.collapse();
rt.select();//光標置最前
var r = document.selection.createRange();
r.collapse(false);
r.moveStart("character", m);//從m位開始
r.moveEnd("character", n);//選取n位
r.select();
}
</script>
<input name="a" value="123456789"><input type=button value="select" οnclick="sl(a,2,4)">
[b]5.再引申一下光標的移動和位置,這個是有人經常問到的問題 <input name=a value="123456789">[/b]
<input type=button value="向前" οnclick="setpos(a,-1)">
<input type=button value="向後" οnclick="setpos(a,1)">
<input type=button value="當前光標的位置" οnclick="getpos(a)">
<script type="text/javascript">
function setpos(obj,n)
{
obj.focus();
var r = document.selection.createRange();
r.collapse(false);
r.move("character", n);
r.select();
};
function getpos(obj)
{
obj.focus();//光標位置不變
var r = document.selection.createRange();
r.collapse(false);
r.setEndPoint("StartToStart", obj.createTextRange());
alert(r.text.length);
};
</script> [/size]
光標在input中的定位
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
點擊,跳出一張新網頁
iteye_10364
2020-06-30 11:59:11
upload-labs(上)1~10
ChenZIDu
2020-06-17 10:45:19
BJDCTF 2nd(WEB復現)
ChenZIDu
2020-06-17 10:45:19
thinkphp、Yii框架的php框架安裝phinx同步數據庫
1、給當前的項目安裝Composer,代碼:curl -s https://getcomposer.org/installer | php 或用 p
Ga_Galin
2020-06-13 10:38:08
vue-cli反向代理以及axios使用
ChenZIDu
2020-06-01 23:15:27
GKCTF2020_web
ChenZIDu
2020-05-26 22:52:44
網鼎杯2020朱雀組-web
ChenZIDu
2020-05-19 18:23:50
網鼎杯2020青龍組-web
ChenZIDu
2020-05-18 10:39:38
Sqli-labs(Page-1)1-22
ChenZIDu
2020-04-26 19:00:21
[BJDCTF 2nd]fake google
ChenZIDu
2020-03-28 16:17:12
Flask框架實現MVC架構+sqlalchemy連接數據庫
ChenZIDu
2020-03-12 06:51:35
Flask框架環境搭建
ChenZIDu
2020-03-10 12:20:05
[SCTF2019]Flag Shop
.OnIsm
2020-03-05 16:08:07
vue路由history模式刷新頁面時頁面丟失時常見的兩種解決方法
Ga_Galin
2020-02-28 01:32:47
BJDCTF2020--web-復現
.OnIsm
2020-02-23 13:42:47