Détails du code du curseur de zone de texte personnalisé JavaScript

Cet article présente principalement des exemples JavaScript de méthodes pour personnaliser le curseur de la zone de texte, qui a une bonne valeur de référence. Jetons un coup d'oeil avec l'éditeur ci-dessous.

Le curseur de la zone de texte (saisie ou zone de texte) ne peut pas être modifié en style (sauf pour modifier la couleur du curseur via color). 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.

【************************Idée de base************** **** *************】

Pour les opérations au clavier, les opérations de base du curseur ne sont rien de plus que les trois touches les plus élémentaires : flèche gauche gauche, flèche droite et 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éplacer le curseur vers la droite, ajouter des caractères ou supprimer des caractères

Retour arrière : supprimer des caractères

【******** Lorsque nous parlons de la façon d'implémenter les fonctions de base du curseur via JS, introduisons d'abord du html et du 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, input Le caractère doit toujours s'appuyer sur des éléments de formulaire. 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>

***CSS***

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

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

**Flèche gauche**

1. Aucun texte n'est saisi, appuyez sur la flèche gauche, le curseur est toujours dans la position où la valeur gauche est 0. 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 le curseur se déplace vers la gauche.

Restriction : Lors du déplacement vers la position où la valeur gauche 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érieur à 0]

**Flèche droite**

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

1. Il n'y a pas de saisie de texte, appuyez sur la droite. flèche, et le curseur est toujours à la position gauche de la valeur 0. 2. Après avoir saisi le texte, appuyez sur la flèche droite pour déplacer le curseur vers la droite.

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

**Retour arrière**

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 . Lorsqu'aucun caractère n'existe, appuyez sur Appuyez sur la touche Suppr, et le curseur simulé ne se déplacera pas vers la gauche, mais restera à la position d'origine 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

**Autres clés**

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

Question : Pourquoi l'auteur a-t-il modifié la valeur de la zone de saisie La ligne de code [aP.innerHTML=chatting_msg.value;] qui attribue la valeur au innerHTML de l'élément p est placée dans le keyup programme de gestionnaire d'événements

 ?

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

Lorsque l'événement est enfoncé (ou enfoncé), la valeur de la zone de texte est attribuée au innerHTML de l'élément p. Dans des circonstances réelles, si deux caractères 'ab' sont saisis. , Mais seul le premier caractère « a » est affiché dans l'élément p. Pour faire simple, la pression sur une touche ou sur une touche n'a aucun problème à afficher les caractères pour la zone de texte elle-même, cela signifie que autant de caractères que vous saisissez seront affichés, mais pour que le contenu du texte soit affiché dans l'élément p, Il « réagira un peu plus lentement ».

[Conseils : l'auteur n'a effectué aucun traitement pour d'autres clés autres que des caractères]

[*********** ******* ************Ajout****************************** 】

1. Afin de ne pas affecter le positionnement correct du curseur lorsque la touche retour arrière est enfoncée, la fonction « déplacer » doit être annulée lorsque la touche retour arrière est enfoncée. pressé

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

2. JM existant dans le code .xxxx, est la base de code de l'auteur JM.addHandler(...) : Ajouter un gestionnaire d'événements JM.removeHandler(...) : Supprimer le gestionnaire d'événements

JM.getStyle(...) : Obtenez la valeur du style informatique

    >>>>>>>>>>>具体的代码可以参考《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';
  };
})();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!