Codedetails des benutzerdefinierten JavaScript-Textfeldcursors

In diesem Artikel werden hauptsächlich JavaScript-Beispiele für Methoden zum Anpassen des Textfeld-Cursors vorgestellt, die einen guten Referenzwert haben. Werfen wir einen Blick mit dem Editor unten.

Der Stil des Cursors des Textfelds (Eingabe oder Textbereich) kann nicht geändert werden (außer die Cursorfarbe durch Farbe zu ändern). 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 den Cursor in Ihrem eigenen Stil zu gestalten. Im Folgenden sind die persönlichen Gedanken des Autors aufgeführt.

【****************************Grundidee****************** **** *************】

Für Tastaturoperationen sind die grundlegenden Cursoroperationen 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 löschen

Rücktaste: Zeichen löschen

【******** Wenn wir darüber sprechen, wie die Grundfunktionen des Cursors durch 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, Eingabe Das Zeichen muss weiterhin auf Formularelementen basieren. Auf der Seite blendet der Autor die echten Formularelemente aus 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>

***CSS***

【************* **************** Offizieller Beginn der Einführung von 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;
}

**Linkspfeil**

1. Es wird kein Text eingegeben, drücken Sie den linken Pfeil, der Cursor befindet sich immer noch an der Position, an der der linke Wert 0 ist. 2. Nachdem Sie Text eingegeben haben (dh der Wert des Textfelds ist nicht leer), drücken Sie den linken Pfeil und der Cursor bewegt sich nach links.

Einschränkung: Wenn Sie sich an eine Position bewegen, an der der linke Wert 0 ist, bewegt sich der Cursor nicht weiter nach links, auch wenn Sie weiterhin den linken Pfeil drücken. [Der Cursor kann sich nur bewegen, wenn sein linker Wert angezeigt wird muss größer als 0 sein]

**Rechtspfeil**

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

1 Es erfolgt keine Texteingabe, drücken Sie die rechte Taste Pfeil, und der Cursor steht immer noch auf der linken 0-Position. 2. Drücken Sie nach der Texteingabe den Rechtspfeil, um den Cursor nach rechts zu bewegen.

Einschränkung: Wenn Sie sich hinter das letzte Zeichen des Textinhalts bewegen, bewegt sich der Cursor nicht weiter nach rechts, selbst wenn Sie weiterhin auf den Rechtspfeil drücken. [Wenn der linke Wert des Cursors gleich ist die Breite des p-Elements, der Cursor befindet sich an der Position des letzten Zeichens】

**Rücktaste**

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 . Wenn kein Zeichen vorhanden ist, drücken Sie die Löschtaste, und der simulierte Cursor bewegt sich nicht nach links, sondern bleibt an der ursprünglichen Position 2. Löschen Sie ein Zeichen und die Cursorposition wird um eine Einheit verschoben links (in diesem Beispiel sind es 6 Pixel); >Frage: Warum hat der Autor den Wert des Eingabefelds geändert? Die Codezeile [aP.innerHTML=chatting_msg.value;], die den Wert dem innerHTML des p-Elements zuweist, wird im Keyup

platziert Event-Handler-

-Programm?

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

Wenn es sich bei dem Ereignis um Tastendruck (oder Tastendruck) handelt, wird der Wert des Textfelds dem innerHTML des p-Elements zugewiesen. Unter tatsächlichen Umständen werden zwei Zeichen „ab“ eingegeben , Innerhalb des p-Elements wird jedoch nur das erste Zeichen „a“ angezeigt.

Um es einfach auszudrücken: Mit Tastendruck oder Tastendruck können Zeichen für das Textfeld selbst angezeigt werden. Das bedeutet, dass so viele Zeichen angezeigt werden, wie Sie eingeben, aber für den Textinhalt, der im p-Element angezeigt werden soll. Es wird „einen Takt langsamer reagieren“. [Tipps: Der Autor hat keine Verarbeitung für andere Nicht-Zeichenschlüssel durchgeführt]

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

[*************** ******* ************Zusatz****************************** 】 1. Um die korrekte Positionierung des Cursors beim Drücken der Rücktaste nicht zu beeinträchtigen, muss die Funktion „Verschieben“ abgebrochen werden, wenn die Rücktaste gedrückt wird gedrückt

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

2. JM, das im Code .xxxx vorhanden ist, ist die Codebasis des Autors JM.addHandler(...): Ereignishandler hinzufügen

JM.removeHandler(...) : Event-Handler entfernen JM.getStyle(...): Den Wert des Computerstils abrufen

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

Das obige ist der detaillierte Inhalt vonCodedetails des benutzerdefinierten JavaScript-Textfeldcursors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!