透過js取得文字方塊遊標位置及定位到文字框，附完整程式碼-js教程-PHP中文網

文字方塊（input或textarea）的遊標無法修改樣式（除了透過color修改遊標顏色）。但筆者希望個人創建自己的網站時，文字框的遊標有屬於自己的風格。所以，嘗試模擬文字方塊的遊標，設計有自己風格的遊標。 以下是筆者個人關於透過js取得文字方塊遊標位置及定位到文字方塊的想法。

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

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

左箭頭：讓遊標向左移動，新增字元或刪除字元

右箭頭：讓遊標向右移動，新增字元或刪除字元

#退格鍵：刪除字元

#【******** 在聊天如何透過JS實作遊標具有的基本功能時，先介紹一些html和css **** ****】

***html***

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

登入後複製

注意：上面的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 ******** **********************】
**左箭頭**
1、沒有輸入文字，按下左箭頭，遊標仍處於left值為##0的位置。 2、當輸入了文字後（即：文字方塊的value
值不為空），按下左箭頭，遊標向左移動。

限制條件：

當移到left值為

0
的位置時，即使繼續按左箭頭，遊標都不會繼續向左移動【遊標在其left值必須大於0的條件下才可以移動】
if(cCode===37 && chatting_msg.value!=&#39;&#39;){
      if(aSpan_l>0){
            aSpan.style.left=aSpan_l-aSpan_w+&#39;px&#39;;
      }
}
登入後複製
**右箭頭** 1、沒有文字輸入，按下右箭頭，遊標仍處於
left
值為
0
的位置。

2、當輸入了文字後，按下右箭頭，遊標會向右移動。

限制條件：
當移到文字內容最後一個字元的後面時，即使繼續按右箭頭，遊標都不會繼續往右移動【遊標的left值等於p元素的寬度時，就是遊標處於最後一個字元的位置】
#
##
 else if(cCode===39 && chatting_msg.value!=&#39;&#39;){
    aSpan.style.left=aSpan_l+aSpan_w+&#39;px&#39;;
         if(aSpan_l===aP_width){
              aSpan.style.left=aP_width+&#39;px&#39;;
          }
 }
登入後複製

############### ########**退格鍵**###################1、當沒有字元存在的時候，按下刪除鍵，模擬遊標並不會向左移動，保持在原有的位置############2、刪除一個字符，遊標的位置就向左移動一個單位（在這個例子中是###6px## #）；######

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

登入後複製

### ################**其他按鍵**#########

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

登入後複製

问题：为什么笔者会将输入框的value值赋值给p元素的innerHTML这行代码【aP.innerHTML=chatting_msg.value;】放置在 keyup 事件处理程序中？
在事件为keydown（或keypress）情况下，执行将文本框的value值赋值给p元素的innerHTML，实际情况下，如果输入两个字符 ‘ab’，但是在p元素内显示的就只有第一个字符 ‘a’。
简单来说就是，keydown或keypress对于文本框本身而言显示字符是没有问题，就是你输入多少个字符就显示多少个字符，但是对于要将文本内容显示在p元素内，则会 “反应慢一拍” 。
【提示：笔者对其他非字符键还未作任何处理】

【************************* 补充 ******************************】

1、为了在按下退格键时不影响光标的正确定位，需要在按下退格键时把 ”move“函数取消掉
-------JM.removeHandler(chatting_msg,'input',move,false);
2、代码中存在的JM.xxxx，是笔者的代码库
　 JM.addHandler(...)：添加事件处理程序
　 JM.removeHandler(...)：删除事件处理程序
JM.getStyle(...)：获取计算机样式的值
>>>>>>>>>>>具体的代码可以参考《JavaScript高级程序设计》这本书
3、笔者自定义的这个光标现在只适合于输入英文、数字、标点符号，暂时不支持输入中文

《《《《《《《完整代码》》》》》》》》》

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

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

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

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

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

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

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

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

登入後複製

更多关于通过js获取文本框光标位置及定位到文本框的方法请关注php中文网！