Code details of the JavaScript custom text box cursor

This article mainly introduces the example of JavaScript custom text box cursor method, which has good reference value. Next, let's take a look at it. This article mainly introduces the example of the JavaScript custom text box cursor method, which has good reference value. Let's take a look at it with the small Editor.

The cursor of the text box (input or textarea) cannot modify the style (except for modifying the cursor color through color ). However, I hope that when I create my own website, the text box is marked with light in my own style. Therefore, try to simulate the cursor of the text box and design a cursor with its own style. The following are my personal ideas.

************* **************]

For keyboard operations, the basic operations of the cursor are essentially the three most basic keys: left arrow, right arrow, and backspace ).

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

Right Arrow: move the cursor to the right to add or delete characters.

Escape key: Delete characters

********]

* ** Html ***

Note: The above html format only simulates the cursor, and the input character still needs to depend on the form element. On the page, I will hide the real form elements and only display the html

Line 1: Simulate the cursor Line 2: The cursor in the 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;}

******** **********************]

** Left arrow **

1. If no text is input, press the left arrow and the cursor is still at the position where the left value is 0.

2. After the text is entered (that is, the value of the text box is not empty), press the left arrow and move the cursor to the left.

Restriction: When the left value is 0, even if you continue to press the left arrow, the cursor does not move to the left. The cursor can be moved only when its left value is greater than 0]

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

** Right arrow **

1. If there is no text input, press the right arrow and the cursor is still at the left value of 0.

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

Restriction: when moving to the end of the last character in the text content, even if you continue to press the right arrow, the cursor will not move to the right [when the left value of the cursor is equal to 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';     }}

** Return key **

1. When no character exists, press the delete key to simulate that the cursor will not move to the left and remain in the original position.

2. delete a character and move the cursor to the left (6 Px in this example );

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

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

Q: Why do I assign the value of the input box to the innerHTML line of code [aP. innerHTML = chatting_msg.value;] of the p element to the keyup event handler?

When the event is keydown (or keypress), the system assigns the value of the text box to the innerHTML of the p element. In actual cases, if two characters 'AB' are entered ', however, only the first character 'a' is displayed in the p element '.

Simply put, keydown or keypress is no problem for the text box itself, that is, the number of characters you enter will be displayed, however, if you want to display the text content in the p element, the response is slow ".

[Note: I have not processed any other non-character keys]

************* *****************]

1. to press the backspace key without affecting the proper positioning of the cursor, you need to cancel the "move" function when pressing the backspace key.

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

2. The JM. xxxx in the Code is the author's code library.

JM. addHandler (...): Add an event handler

JM. removeHandler (...): deletes the event handler.

JM. getStyle (...): gets the computer style value.

>>>>>>>>>>> For more information about the code, see Javascript advanced programming.

3. The cursor defined by the author is only suitable for inputting English letters, numbers, and punctuation marks. Chinese characters cannot be entered at the moment.

"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 (curso R_module, cP); // keydown JM. addHandler (chatting_msg, 'keylow', 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 v Ar val = chatting_msg.value; // left arrow // no value, do not move by the left arrow // have a value, press the right arrow, and move the cursor to the left, however, if (cCode = 37 & chatting_msg.value! = '') {If (aSpan_l> 0) {aSpan. style. left = aSpan_l-aSpan_w + 'px '; }}// right arrow // no value, do not move by the right arrow // There is a value, press the right arrow, the light is shifted to the right, however, you cannot move 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 ';};})();

The above is the details of the code for the JavaScript custom text box cursor. For more information, see other related articles in the first PHP community!