JavaScript自定義文本框光標(biāo)

發(fā)布時間：2020-10-09 18:41:59 來源：腳本之家閱讀：136 作者：Jm_jing 欄目：web開發(fā)

文本框（input或textarea）的光標(biāo)無法修改樣式（除了通過color修改光標(biāo)顏色）。但筆者希望個人創(chuàng)建自己的網(wǎng)站時，文本框的光標(biāo)有屬于自己的風(fēng)格。所以，嘗試模擬文本框的光標(biāo)，設(shè)計有自己風(fēng)格的光標(biāo)。以下是筆者個人的想法。

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

對于鍵盤操作來說，光標(biāo)的基本操作不外乎最基本的三個鍵：左箭頭（left arrow）、右箭頭（right arrow）和退格鍵（backspace）。

左箭頭：讓光標(biāo)向左移動，添加字符或者刪除字符

右箭頭：讓光標(biāo)向右移動，添加字符或者刪除字符

退格鍵：刪除字符

【******** 在聊如何通過JS實現(xiàn)光標(biāo)具有的基本功能時，先介紹一些html和css ********】

***html***

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

注意：上面的html格式只是模擬光標(biāo)，輸入字符還是需要靠表單元素的。在頁面上，筆者會把真正的表單元素隱藏，只會顯示模擬光標(biāo)的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>

第一行：模擬光標(biāo) 第二行：表單元素里的光標(biāo)

***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 ******************************】

**左箭頭**

1、沒有輸入文字，按下左箭頭，光標(biāo)仍處于left值為0的位置。

2、當(dāng)輸入了文字后（即：文本框的value值不為空），按下左箭頭，光標(biāo)向左移動。

限制條件：當(dāng)移動到left值為0的位置時，即使繼續(xù)按左箭頭，光標(biāo)都不會繼續(xù)向左移動【光標(biāo)在其left值必須大于0的條件下才可以移動】

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

**右箭頭**

1、沒有文字輸入，按下右箭頭，光標(biāo)仍處于left值為0的位置。

2、當(dāng)輸入了文字后，按下右箭頭，光標(biāo)向右移動。

限制條件：當(dāng)移到文本內(nèi)容最后一個字符的后面時，即使繼續(xù)按右箭頭，光標(biāo)都不會繼續(xù)向右移動【光標(biāo)的left值等于p元素的寬度時，就是光標(biāo)處于最后一個字符的位置】

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';
     }
}

**退格鍵**

1、當(dāng)沒有字符存在的時候，按下刪除鍵，模擬光標(biāo)并不會向左移動，保持在原有的位置

2、刪除一個字符，光標(biāo)的位置就向左移動一個單位（在這個例子中是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）情況下，執(zhí)行將文本框的value值賦值給p元素的innerHTML，實際情況下，如果輸入兩個字符 ‘a(chǎn)b'，但是在p元素內(nèi)顯示的就只有第一個字符 ‘a(chǎn)'。

簡單來說就是，keydown或keypress對于文本框本身而言顯示字符是沒有問題，就是你輸入多少個字符就顯示多少個字符，但是對于要將文本內(nèi)容顯示在p元素內(nèi)，則會 “反應(yīng)慢一拍” 。

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

【************************* 補(bǔ)充 ******************************】

1、為了在按下退格鍵時不影響光標(biāo)的正確定位，需要在按下退格鍵時把 ”move“函數(shù)取消掉

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

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

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

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

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

>>>>>>>>>>>具體的代碼可以參考《JavaScript高級程序設(shè)計》這本書

3、筆者自定義的這個光標(biāo)現(xiàn)在只適合于輸入英文、數(shù)字、標(biāo)點(diǎn)符號，暫時不支持輸入中文

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

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值，按右箭頭，光標(biāo)向左移，但移到前面一個字符的后面就不可以再移動
    if(cCode===37 && chatting_msg.value!=''){
      if(aSpan_l>0){
        aSpan.style.left=aSpan_l-aSpan_w+'px'; 
      }
    }
    //right arrow
    //沒有value值，按右箭頭不動
    //有value值，按右箭頭，光標(biāo)向右移，但移到最后一個字符的后面就不可以再移動
    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';
  };
})();

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！　　

向AI問一下細(xì)節(jié)

JavaScript自定義文本框光標(biāo)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽