Obtenez la position du curseur de la zone de texte et localisez la zone de texte via js, code complet ci-joint

Le curseur de la zone de texte (saisie ou zone de texte) ne peut pas être modifié (sauf pour modifier la couleur du curseur par couleur). Mais l’auteur espère que lorsque les individus créeront leur propre site Web, le curseur dans la zone de texte aura son propre style. Essayez donc de simuler le curseur de la zone de texte et concevez le curseur avec votre propre style. Voici les réflexions personnelles de l'auteur sur l'obtention de la position du curseur de la zone de texte et son positionnement dans la zone de texte via js.

【**********************Idées de base* **************************】

Pour les opérations du clavier, les opérations de base du curseur ne sont rien de plus que les trois touches les plus élémentaires : flèche gauche (flèche gauche), flèche droite (flèche droite) et touche retour arrière (retour arrière).

Flèche gauche : déplacez le curseur vers la gauche, ajoutez des caractères ou supprimez des caractères

Flèche droite : déplacez le curseur vers la droite, ajoutez des caractères ou supprimez des caractères

Touche Retour arrière : supprimez des caractères

【******** Lorsque nous parlons de la façon d'implémenter les fonctions de base du curseur via JS, introduisons d'abord quelques éléments HTML et CSS. **** ****】

***html***

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

Remarque : le format HTML ci-dessus simule uniquement le curseur, et vous devez toujours vous fier aux éléments du formulaire pour saisir les caractères. Sur la page, l'auteur masquera les éléments réels du formulaire et affichera uniquement le html qui simule le curseur

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

　 Le premier line : Simuler le curseur Deuxième ligne : Curseur dans l'élément de formulaire

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

【****************************** Commence officiellement à introduire JS *** * ****************************】

** Flèche gauche* + L'emplacement de 🎜>.

2. Après avoir saisi le texte (c'est-à-dire : la valeur de la zone de texte n'est pas vide), appuyez sur la flèche gauche et sur la touche curseur Déplacer vers la gauche.

Contrainte : Lorsqu'elle est déplacée vers gauche la valeur est

0, même si vous continuez à appuyer sur la flèche gauche, le curseur ne continuera pas à se déplacer vers la gauche [Le curseur ne peut se déplacer que si sa valeur à gauche doit être supérieure à 0]

**Flèche droite**

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

1. S'il n'y a pas de saisie de texte, appuyez sur la flèche droite et le curseur est toujours à la position où la valeur de

gauche

est

0.

2. Après avoir saisi le texte, appuyez sur la flèche droite pour déplacer le curseur vers la droite.

Restrictions : Lorsque vous vous déplacez derrière le dernier caractère du contenu du texte, le curseur ne continuera pas même si vous continuez à appuyer sur la droite flèche Déplacer vers la droite [Lorsque la valeur gauche du curseur est égale à la largeur de l'élément p, le curseur est à la position du dernier caractère]

**Retour arrière**

1. touche Supprimer pour simuler Le curseur ne se déplacera pas vers la gauche et restera à la position d'origine

 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. Supprimez un caractère et la position du curseur se déplacera d'une unité vers la gauche (dans cet exemple c'est 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中文网！