博客 / 詳情

返回

input或textarea中關於光標移動問題

什麼是光標

頁面上輸入框中閃爍的光標其實是一個選區,也就是選區的左邊界和右邊界直接形成的選區。

非IE瀏覽器

輸入框結點input=document.getElementById('#input')有二個屬性: selectionStart、selectionEnd,分別代表選區開始位置,選區結束位置。

通過修改這二個值就可以形成選區,寬度為0也就實現了光標的位置控制和獲取。

IE瀏覽器

IE瀏覽器提供的API更加豐富:
createTextRange()、 document.selection.createRange()、moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()。

第一步:

//創建一個文本選區對象。
var range = input.createTextRange(); 

第二步:一些操作

range.collapse(boolean);

可以傳入一個布爾值作為參數,參數默認值為true,指示向左還是向右壓縮

range.moveStart(param1,param2);

第一個參數可選值有 character、word、sentence、textedit. 比如character,即根據字符來偏移。第二個參數代表偏移的多少,正負表示方向。

range.moveEnd(param1,param2);

和上面那個方法參數一樣,不同的是這是用來移動結束邊界

第三步:

range.select();  //將range包含的區域選中。

需要注意的是:在調用range.select()方法之前,選區對象的內容並不會被添加選中效果

補充:

var range = document.selection.createRange();

這個方法根據當前頁面中的選中文字區域來創建一個選區對象,這個選區對象與createTextRange方法的到選區對象的區別在於,它的選區範圍為頁面選中文字的區域,即它的左右邊界不再是默認的左最小右最大。

range.move(param1,param2);

和moveStart參數一樣,對於移動光標比較友好。

user avatar laughingzhu 頭像 ivyzhang 頭像 chongdianqishi 頭像 weirdo_5f6c401c6cc86 頭像 suporka 頭像 waweb 頭像 liyl1993 頭像 wukongnotnull 頭像 wjchumble 頭像 u_12219 頭像 moziyu 頭像 ni_5e1946a1c2171 頭像
34 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.