Ermitteln Sie die Cursorposition des Textfelds und suchen Sie das Textfeld über js. Der vollständige Code ist angehängt

Der Cursor des Textfelds (Eingabe oder Textbereich) kann nicht geändert werden (außer der Änderung der Cursorfarbe durch Farbe). Der Autor hofft jedoch, dass der Cursor im Textfeld einen eigenen Stil hat, wenn Einzelpersonen ihre eigenen Websites erstellen. Versuchen Sie also, den Cursor des Textfelds zu simulieren und gestalten Sie den Cursor in Ihrem eigenen Stil. Im Folgenden sind die persönlichen Gedanken des Autors zum Ermitteln der Cursorposition des Textfelds und zum Positionieren im Textfeld über js aufgeführt.

【*************************Grundlegende Ideen* ***************************】

Für Tastaturoperationen sind die Grundoperationen des Cursors nichts anderes als die drei grundlegendsten Tasten: Pfeil nach links, Pfeil nach rechts und Rücktaste.

Pfeil nach links: Bewegen Sie den Cursor nach links, fügen Sie Zeichen hinzu oder löschen Sie Zeichen

Rechtspfeil: Cursor nach rechts bewegen, Zeichen hinzufügen oder Zeichen löschen

Rücktaste: Zeichen löschen

********** Wenn wir darüber sprechen, wie die Grundfunktionen des Cursors über JS implementiert werden, stellen wir zunächst etwas HTML und CSS vor **** ****】

***html***

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

Hinweis: Das obige HTML-Format simuliert nur den Cursor, und Sie müssen sich weiterhin auf Formularelemente verlassen, um Zeichen einzugeben. Auf der Seite verbirgt der Autor die echten Formularelemente und zeigt nur den HTML-Code an, der den Cursor simuliert

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

　 Der erste Zeile: Cursor simulieren Zweite Zeile: Cursor im Formularelement

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

【**************************** Offizieller Beginn der Einführung von JS *** * **************************】

** Pfeil nach links* + Der Standort von 🎜>.

2. Drücken Sie nach der Texteingabe (d. h.: der Wert-Wert des Textfelds ist nicht leer) den Pfeil nach links und den Cursor nach links bewegen.

Einschränkung: Bei Verschiebung nach links beträgt der Wert

0, auch wenn Sie weiterhin den linken Pfeil drücken, bewegt sich der Cursor nicht weiter nach links [Der Cursor kann sich nur bewegen, wenn sein linker Wert größer als 0 sein muss]

**Rechtspfeil**

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

1. Wenn keine Texteingabe erfolgt, drücken Sie den Rechtspfeil und der Cursor befindet sich immer noch an der Position, an der der Wert von

links

0.

2. Drücken Sie nach der Texteingabe den Rechtspfeil, um den Cursor nach rechts zu bewegen.

Einschränkungen: Beim Bewegen hinter das letzte Zeichen des Textinhalts fährt der Cursor nicht fort, selbst wenn Sie weiterhin rechts drücken Pfeil Nach rechts bewegen [Wenn der linke Wert des Cursors gleich der Breite des p-Elements ist, befindet sich der Cursor an der Position des letzten Zeichens]

**Rücktaste**

1 Löschtaste zum Simulieren Der Cursor bewegt sich nicht nach links und bleibt an der ursprünglichen Position

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

2. Löschen Sie ein Zeichen und die Cursorposition wird um eine Einheit nach links verschoben (in diesem Beispiel). es ist 6px );

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中文网！