JavaScript Custom text Box Cursor--beginner version

The cursor of the text box (input or Textarea) cannot modify the style (except to modify the cursor color by color). But I want the individual to create their own website when the text box cursor has its own style. so, try to simulate the cursor of the text box and design the cursor with its own style. the Following is the Author's personal thoughts.

"************************ Basic Idea ***************************"

For keyboard operation, The basic operation of the cursor is the most basic three keys: left arrow, right ARROW and backspace (backspace).

Left Arrow: let the cursor move to the left, add characters or delete characters

Right arrow: let the cursor move right, add characters or delete characters

Backspace: Delete character

"******** is talking about how to implement the basic functions of the cursor with js, first introduce some HTML and CSS ********"

html***

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

Note: the HTML format above only simulates the cursor, and the input character or the form element is Required. On the page, the author hides the real form elements, only the HTML that simulates the cursor is Displayed.

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

first line: analog cursor second line: cursor in form element

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

"*************************** formally began to introduce JS ******************************"

* * LEFT ARROW * *

1, No input text, press the left arrow, the cursor is still in the position of 0.

2, When the text is entered (that is: the text box value value is not empty), the left arrow is pressed and the cursor moves to the LEFT.

restriction: When you move to a position with a left value of 0 , the cursor will not continue to move left even if you continue to press the right ARROW. The cursor can move if the left value must be greater than 0.

If (ccode===37 && chatting_msg.value!= ") {      if (aspan_l>0) {            aspan.style.left=aspan_l-aspan_w+ ' PX ';      }}

* * RIGHT ARROW * *

1, No text input, press the right arrow, the cursor is still in the left value of 0 Position.

2. When the text is entered, press the right arrow and the cursor moves to the RIGHT.

restriction: When you move to the end of the last character of the text content, even if you continue to press the right arrow, the cursor will not continue to the right "when the left value of the cursor equals the width of the p element, the cursor is at the position of the last character"

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

1, when no characters exist, press the delete button, the simulation cursor will not move to the left, remain in the original position

2, Delete a character, the position of the cursor moves to the left one unit (in this case is 6px);

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

* * Other keys * *

Else{       //show value by KeyUp not keydown,because KeyDown would 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 ';};

　　

question: Why does the author assign the value of the input box to the InnerHTML line of the P element "ap.innerhtml=chatting_msg.value;" in the keyup event handler?

In the event of KeyDown (or keypress), execution assigns the value of the text box to the innerHTML of the P element, in real case, if you enter two characters ' AB ', but only the first character ' a ' is displayed within the P Element.

In a nutshell, KeyDown or keypress is no problem with displaying characters for the text box itself, which is how many characters you type, but it "slows down" If you want to display text content within the P Element.

"hint: I have not processed any other non-character keys yet"

"************************* Supplement ******************************"

1, in order to press the BACKSPACE bar does not affect the correct positioning of the cursor, you need to press the BACKSPACE bar when the "move" function to cancel out

-------jm.removehandler (chatting_msg, ' input ', move,false);

2, the code exists in the jm.xxxx, is the Author's code base

Jm.addhandler (...) : Adding an event handler

Jm.removehandler (...) : Deleting an event handler

Jm.getstyle (...) : Gets the value of the computer style

>>>>>>>>>>> Specific code can refer to the "javascript Advanced programming" book

3, the author of the custom cursor is now only suitable for inputting english, numerals, punctuation, temporarily does not support the input of Chinese

"the Complete code" "" "" "

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//does not have value, press right arrows//have value, press Rightwards arrow, LightLabel to the left, but to the front of a character, you can no longer move if (ccode===37 && chatting_msg.value!= ") {if (aspan_l>0) {              aspan.style.left=aspan_l-aspan_w+ ' px '; }}//right arrow//does not have value, press the right ARROW to Move//has value, press the right arrow, move the cursor to the right, but move to the back of the last character, you can no longer move the else if (cC            ode===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.innerhtm                l=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 '; };}) ();

　　

JavaScript Custom text Box Cursor--beginner version