テキスト ボックスのカーソル位置を取得し、js を通じてテキスト ボックスを見つけます。完全なコードが添付されています。

テキストボックス（入力またはテキストエリア）のカーソルは、スタイルを変更できません（カラーでカーソルの色を変更する場合を除く）。しかし、著者は、個人が独自の Web サイトを作成するときに、テキスト ボックス内のカーソルが独自のスタイルになることを望んでいます。したがって、テキスト ボックスのカーソルをシミュレートして、独自のスタイルでカーソルをデザインしてみてください。 以下はjsによるテキストボックスのカーソル位置の取得とテキストボックスの配置についての筆者の個人的な考えです。

【************************基本的な考え方*************** *************】

キーボード操作の場合、カーソルの基本操作は、最も基本的な 3 つのキー、左矢印、右矢印 (右矢印) とバックスペース キー (バックスペース)。

左矢印: カーソルを左に移動し、文字を追加または文字を削除します

右矢印: カーソルを右に移動し、文字を追加または文字を削除します

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>

ログイン後にコピー

最初の行: カーソルをシミュレートする 2 行目: フォーム要素内のカーソル

***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の位置に移動する場合、左矢印を押し続けてもカーソルは左に移動し続けません。 [カーソルは左の値にあります] 0 より大きい場合のみ移動できます】

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

ログイン後にコピー

**右矢印**

1。テキスト入力がない場合は、右矢印を押します。カーソルは left 値が 0 の位置にあります。

2. テキストを入力したら、右矢印を押してカーソルを右に移動します。

制限事項: テキストコンテンツの最後の文字の後ろに移動する場合、右矢印を押し続けても、カーソルは右に移動し続けません[カーソルの左の値がp 要素の幅に等しい、つまり、カーソルは最後の文字の位置にあります。文字が存在する場合は、削除キーを押してカーソルをシミュレートします。左には移動せず、元の位置に留まります

2. 文字を削除すると、カーソル位置が 1 単位左に移動します (この例では、

6px
);

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

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元素内，则会 “反应慢一拍” 。

【提示：笔者对其他非字符键还未作任何处理】

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

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('[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';
    };
})();

ログイン後にコピー

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