[Javascript]設定游標在TextBox中的位置

2009-06-11

17511
0
Javascript

透過javascript的方式來取得並指定游標在textbox中的位置。

之前因為自己修改了third-party的元件，雖然修改出想要的功能，但卻造成TextBox中的游標會亂飄，舉個例子：

12345-->我點在3跟4中間，它卻會自動跳到1的前面。

最後追查的結果是因為元件本身有其他的mouse click事件，而這個事件不能關閉，否則會有其他衍生性的問題，所以最後只好自己再找其他方法來處理，後來在網路上查到javascript有方法可以對textbox的游標位置做取得與設定，所以我就在元件本身的click事件之前加上取得目前游標位置的程式，在click事件之後再把位置重新設定一次，這兩段程式碼分別如下：

傳入textbox這個控制項，然後取得目前游標前的文字內容，而如果要設定游標的位置，可以先透過getMousePosition回傳的文字內容，計算其length，然後在呼叫下方的function進行游標位置的設定：

function setMousePosition(pControl, pPos)
02

{
03

if(pControl.setSelectionRange)
04

{
05

pControl.focus();
06

pControl.setSelectionRange(pPos,pPos);
07

}
08

else if (pControl.createTextRange)
09

{
10

var tRange = pControl.createTextRange();
11

tRange.collapse(true);
12

tRange.moveEnd('character', pPos);
13

tRange.moveStart('character', pPos);
14

tRange.select();
15

}
16

}

傳入textbox本身及想要設定的位置，例如：1234567，想要將游標停在4.5中間，那就要傳入4。

透過這兩個function就剛好解掉我的問題囉，後來無聊的時候用這兩個function寫了一段讓人見鬼的程式，當使用者點在4.5中間時，我就random讓他亂跳，用鍵盤操作也被我改掉了，他怎麼點就是點不到他想要的那個位置，這是當初公司內部測試的時候玩的，正常上線可不能這樣亂玩。

function getMousePosition(pControl)
02

{
03

try
04

{
05

var tSrc = document.activeElement;
06

pControl.focus();
07

var tRang = document.selection.createRange();
08

tRang.setEndPoint( "StartToStart",pControl.createTextRange())
09

tSrc.focus();
10

return tRang.text;
11

}
12

catch(x)
13

{
14

alert('Get position error!!');
15

}
16

}

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁