寫在前面
最近在上看到它的日期輸入控件，感覺挺有意思。好吧，動(dòng)手寫一個(gè)，加到自己的代碼庫(kù)里吧。
然后問題來了，在上面圖片中，我們很明顯的看得出這里涉及光標(biāo)位置的控制。比如說當(dāng)我輸入1993的3之后java設(shè)置文本框位置，光標(biāo)必須要得插入到-中劃線的下個(gè)輸入點(diǎn)。
在網(wǎng)上找了找獲取和設(shè)置光標(biāo)位置的方法，發(fā)現(xiàn)是資料是相當(dāng)?shù)钠扑椋]有一個(gè)詳細(xì)的介紹。 所以我來一個(gè)詳細(xì)的。 好了，不要啰嗦。
基本的認(rèn)識(shí)
文本選中區(qū)域
光標(biāo)
頁(yè)面中閃爍的光標(biāo)其實(shí)就是特殊的寬度為0的選區(qū)。 簡(jiǎn)單理解就是選區(qū)的左右邊界交叉形成了光標(biāo)。 有了這個(gè)概念下面的內(nèi)容就很好理解了。
非IE瀏覽器下的實(shí)現(xiàn)
這里需要用到input元素的兩個(gè)屬性。
、 選區(qū)開始位置，選區(qū)結(jié)束位置。
二者代表了選中區(qū)域的左右邊界。
兩個(gè)值默認(rèn)都是0，所以當(dāng)我們使用input.focus()方法時(shí)，默認(rèn)光標(biāo)在文本的開頭。(注意這里并不是說每次focus調(diào)用光標(biāo)都出現(xiàn)在開頭。是因?yàn)榈暮偷闹惦S著文本輸入而改變，因而光標(biāo)的位置隨之改變。)
文本選中
我們?cè)O(shè)置1 input. = 0; //選中區(qū)域左邊界2 input. = input.value.; //選中區(qū)域右邊界
上面的代碼可以選中輸入框的全部?jī)?nèi)容。 等同于input.();input. = 1; //選中區(qū)域左邊界input. = 4; //選中區(qū)域右邊界
上面的代碼選中了234三個(gè)字符。
我們?nèi)绾潍@取選中的文本內(nèi)容呢？ 因?yàn)橐呀?jīng)知道了和,所以用字符串的方法var = input.value.(input.,input.);
光標(biāo)位置
設(shè)置光標(biāo)input. = 5; //選中區(qū)域左邊界input. = 5; //選中區(qū)域右邊界
上面的代碼把光標(biāo)放到5的后面。
獲取光標(biāo)位置
直接使用和中的任意一個(gè)值即光標(biāo)的位置。
IE瀏覽器下的實(shí)現(xiàn)
IE下對(duì)于文本流的處理提供了更加強(qiáng)大的支持，不過這里我只著重于這篇文章的主旨。
var range = input.(); //創(chuàng)建一個(gè)文本選區(qū)對(duì)象。
這個(gè)選區(qū)對(duì)象默認(rèn)包含了input的全部文本內(nèi)容。需要注意的是，這個(gè)選區(qū)對(duì)象是一個(gè)抽象的區(qū)域。，在調(diào)用range.()方法之前，選區(qū)對(duì)象的內(nèi)容并不會(huì)被選中。range.(); //將選區(qū)對(duì)象包含的內(nèi)容選中。
我們可以用 range.text屬性得到選中的文字
選區(qū)有兩個(gè)類似于上面和屬性的方法， 和方法。
上面我們說過，這個(gè)選區(qū)對(duì)象包含input的全部文本內(nèi)容，所以它的左右邊界分別就是文本的開頭和結(jié)尾位置。
方法用來移動(dòng)左邊界。 像這樣調(diào)用
range.("",2); //左邊界右移兩個(gè)字符 。 --字符range.(); //將range包含的區(qū)域選中。
結(jié)果
和都要傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)可選值有 、word、、. 這里我們只用到，即根據(jù)字符來偏移。 第二個(gè)參數(shù)代表偏移的多少，正負(fù)表示方向。
我們知道左邊界最初默認(rèn)是0java設(shè)置文本框位置，右邊界默認(rèn)是文本內(nèi)容長(zhǎng)度值。
我們注意到每次選中區(qū)域的操作都需要調(diào)用range.()方法，通過方法來把range對(duì)象包含的內(nèi)容區(qū)域選中。這與上面的其他瀏覽器的實(shí)現(xiàn)方式貌似有了大的差異。
還有一個(gè)很有用的方法 ， 見名知意，就是將選區(qū)對(duì)象的范圍壓縮，下面詳細(xì)介紹。
可以傳入一個(gè)布爾值作為參數(shù),參數(shù)默認(rèn)值為true，指示向左還是向右壓縮。var range = input.(); //創(chuàng)建選區(qū)對(duì)象//此時(shí)選區(qū)對(duì)象的左邊界為0,右邊界為input.value.;range.();//此時(shí)選區(qū)對(duì)象左邊界為0，右邊界為0； 相當(dāng)于將選區(qū)向左收縮了,即使右邊界下標(biāo)等于左邊界下標(biāo)。//左右邊界重合,可以顯示光標(biāo)。range.();
效果如圖
(true)相當(dāng)于讓右邊界下標(biāo)等于左邊界下標(biāo)。
再試看看(false)var range = input.(); //創(chuàng)建選區(qū)對(duì)象//此時(shí)選區(qū)對(duì)象的左邊界為0,右邊界為input.value.;range.(false);//此時(shí)選區(qū)對(duì)象左邊界為input.value.，右邊界為input.value.； 相當(dāng)于將選區(qū)向右收縮了,即使左邊界下標(biāo)等于右邊界下標(biāo)。//左右邊界重合,可以顯示光標(biāo)。range.();
效果如圖
可以看到，我們使用(false)結(jié)合方法可以很方便的把光標(biāo)focus到文本框的末尾。
還有一個(gè)move方法var range = input.();
range.("",2);
range.(); //圖一
range.move("",3);//等價(jià)于 range.(true); range.("",3);range.("",3); 三步。合一range.(); //圖二
這個(gè)方法和有一樣的參數(shù)，不過有點(diǎn)難以理解。 上面的代碼相當(dāng)于------先將選區(qū)向左收縮，這時(shí)候就相當(dāng)于一個(gè)光標(biāo)咯，然后將光標(biāo)右移三個(gè)字符。
上面的代碼的兩個(gè)圖， 圖一
圖二
當(dāng)我們要移動(dòng)光標(biāo)時(shí)，move函數(shù)必然是一個(gè)非常不錯(cuò)的選擇。
下面剩下的就是對(duì)函數(shù)的封裝咯。 () , () , (),(). 有點(diǎn)累了，晚上再寫。