JavaScript 自定義文本框光標——初級版

文本框（input或textarea）的光標沒法修改樣式（除了經過color修改光標顏色）。但筆者但願我的建立本身的網站時，文本框的光標有屬於本身的風格。因此，嘗試模擬文本框的光標，設計有本身風格的光標。如下是筆者我的的想法。

 

【************************基本思路***************************】

對於鍵盤操做來講，光標的基本操做不外乎最基本的三個鍵：左箭頭（left arrow）、右箭頭（right arrow）和退格鍵（backspace）。

左箭頭：讓光標向左移動，添加字符或者刪除字符

右箭頭：讓光標向右移動，添加字符或者刪除字符

退格鍵：刪除字符

 

【********  在聊如何經過JS實現光標具備的基本功能時，先介紹一些html和css  ********】

***html***

<div class="cursor_module">
    <p class="cursor_content"></p><span class="cursor"></span>
</div>

注意：上面的html格式只是模擬光標，輸入字符仍是須要靠表單元素的。在頁面上，筆者會把真正的表單元素隱藏，只會顯示模擬光標的html

<form id="chatting_form" class="clearfix" enctype="application/x-www-form-urlencoded">
       <label for="chatting_msg"></label><input type="text"  id="chatting_msg" autofocus name="chatting_msg">
 </form>

　    第一行：模擬光標        第二行：表單元素裏的光標

 

***CSS***

.cursor_module{
    position: relative;
}

.cursor_content{
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    max-width: 90%;
    word-wrap: break-word;
    overflow: hidden;
    display: inline-block;
    white-space: pre;
}
.cursor{
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 16px;
    display: inline-block;
    background: green;
    z-index: 1000;
}

 

【*************************** 正式開始介紹JS ******************************】

**左箭頭**

一、沒有輸入文字，按下左箭頭，光標仍處於left值爲0的位置。

二、當輸入了文字後（即：文本框的value值不爲空），按下左箭頭，光標向左移動。

限制條件：當移動到left值爲0的位置時，即便繼續按左箭頭，光標都不會繼續向左移動【光標在其left值必須大於0的條件下才能夠移動】

 

if(cCode===37 && chatting_msg.value!=''){
      if(aSpan_l>0){
            aSpan.style.left=aSpan_l-aSpan_w+'px';
      }
}

 

 

**右箭頭**

一、沒有文字輸入，按下右箭頭，光標仍處於left值爲0的位置。

二、當輸入了文字後，按下右箭頭，光標向右移動。

限制條件：當移到文本內容最後一個字符的後面時，即便繼續按右箭頭，光標都不會繼續向右移動【光標的left值等於p元素的寬度時，就是光標處於最後一個字符的位置】

 

 else if(cCode===39 && chatting_msg.value!=''){
    aSpan.style.left=aSpan_l+aSpan_w+'px';
         if(aSpan_l===aP_width){
              aSpan.style.left=aP_width+'px';
          }
 }

 

 

**退格鍵**

一、當沒有字符存在的時候，按下刪除鍵，模擬光標並不會向左移動，保持在原有的位置

二、刪除一個字符，光標的位置就向左移動一個單位（在這個例子中是6px）；

 

else if(cCode===8){
    if(chatting_msg.value!=''){
         aP.innerHTML=chatting_msg.value;
         if(aSpan_l!=0){
              aSpan.style.left=aSpan_l-aSpan_w+'px';
            }
     }else{
            aSpan.style.left=0;
       }
            //if enter backspace,remove move event
            JM.removeHandler(chatting_msg,'input',move,false);
  }　　

 

 

**其餘按鍵**

 

else{
       //show value by keyup not keydown,because keydown will slow step;
       JM.addHandler(chatting_msg,'keyup',function () {
                aP.innerHTML=chatting_msg.value;
       },false);
       JM.addHandler(chatting_msg,'input',move,false);
}
var move=function () {
    var aSpan=JM.getEles('.cursor')[0],
        aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
        aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
    aSpan.style.left=aSpan_l+aSpan_w+'px';
};

 

　　

 

問題：爲何筆者會將輸入框的value值賦值給p元素的innerHTML這行代碼【aP.innerHTML=chatting_msg.value;】放置在 keyup 事件處理程序中？

在事件爲keydown（或keypress）狀況下，執行將文本框的value值賦值給p元素的innerHTML，實際狀況下，若是輸入兩個字符 ‘ab’，可是在p元素內顯示的就只有第一個字符 ‘a’。

簡單來講就是，keydown或keypress對於文本框自己而言顯示字符是沒有問題，就是你輸入多少個字符就顯示多少個字符，可是對於要將文本內容顯示在p元素內，則會 「反應慢一拍」 。

【提示：筆者對其餘非字符鍵還未做任何處理】

 

【************************* 補充 ******************************】

一、爲了在按下退格鍵時不影響光標的正肯定位，須要在按下退格鍵時把 」move「函數取消掉  

    -------JM.removeHandler(chatting_msg,'input',move,false);

二、代碼中存在的JM.xxxx，是筆者的代碼庫

　 JM.addHandler(...)：添加事件處理程序

　 JM.removeHandler(...)：刪除事件處理程序

    JM.getStyle(...)：獲取計算機樣式的值

    >>>>>>>>>>>具體的代碼能夠參考《JavaScript高級程序設計》這本書

三、筆者自定義的這個光標如今只適合於輸入英文、數字、標點符號，暫時不支持輸入中文

 

《《《《《《《    完整代碼    》》》》》》》》》

var Cursor=(function () {
    var chatting_msg=JM.getEles('[name=\'chatting_msg\']')[0];
    var cursor_module=JM.getEles('.cursor_module')[0];
    var chatting_footer=JM.getEles('.chatting_footer')[0];

    //create elements
    var cP=document.createElement('p');
    var cSpan=document.createElement('span');
    JM.addClass(cP,'cursor_content');
    JM.addClass(cSpan,'cursor');
    JM.addNodes(cursor_module,cSpan);
    JM.addNodes(cursor_module,cP);

    //keydown
    JM.addHandler(chatting_msg,'keydown',function (event) {
        var ev=JM.getEvent(event),
            cCode=JM.getCharCode(ev);

        var aP=JM.getEles('.cursor_content')[0],
            aSpan=JM.getEles('.cursor')[0];

        var aP_width=parseInt(JM.getStyle(aP,'width'));//get aP real width

        var aSpan_l=parseInt(JM.getStyle(aSpan,'left')),//get span left
            aSpan_w=parseInt(JM.getStyle(aSpan,'width'));//get span width

        var val=chatting_msg.value;
        //left arrow
        //沒有value值，按左箭頭不動
        //有value值，按右箭頭，光標向左移，但移到前面一個字符的後面就不能夠再移動
        if(cCode===37 && chatting_msg.value!=''){
            if(aSpan_l>0){
                aSpan.style.left=aSpan_l-aSpan_w+'px';  
            }
        }
        //right arrow
        //沒有value值，按右箭頭不動
        //有value值，按右箭頭，光標向右移，但移到最後一個字符的後面就不能夠再移動
        else if(cCode===39 && chatting_msg.value!=''){
            aSpan.style.left=aSpan_l+aSpan_w+'px';
            if(aSpan_l===aP_width){
                aSpan.style.left=aP_width+'px';
            }
        }
        //backspace
        else if(cCode===8){
            if(chatting_msg.value!=''){
                aP.innerHTML=chatting_msg.value;
                if(aSpan_l!=0){
                    aSpan.style.left=aSpan_l-aSpan_w+'px';
                }
            }else{
                aSpan.style.left=0;
            }
            //if enter backspace,remove move event
            JM.removeHandler(chatting_msg,'input',move,false);
        }
        else{
            //show value by keyup not keydown,because keydown will slow step;
            JM.addHandler(chatting_msg,'keyup',function () {
                aP.innerHTML=chatting_msg.value;
            },false);
            JM.addHandler(chatting_msg,'input',move,false);
        }
    },false);

    //move cursor in the text
    var move=function () {
        var aSpan=JM.getEles('.cursor')[0],
            aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
            aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
        aSpan.style.left=aSpan_l+aSpan_w+'px';
    };
})();