Code details of JavaScript custom text box cursor

This article mainly introduces JavaScriptmethod examples of customizing the text box cursor, which has a good reference value. Let’s take a look with the editor.

The cursor of the text box (input or textarea) cannot be modified in style (except for modifying the cursor color through color). But the author hopes that when individuals create their own websites, the cursor in the text box will have their own style. So, try to simulate the cursor of the text box and design the cursor with your own style. The following are the author's personal thoughts.

【************************The basic idea************** *************】

For keyboard operations, the basic operations of the cursor are nothing more than the three most basic keys: left left arrow, right arrow, and backspace.

Left arrow: Move the cursor to the left, add characters or delete characters

Right arrow: Move the cursor to the right, add characters or delete characters

Backspace key: Delete characters

【******** When talking about how to implement the basic functions of the cursor through JS, let’s first introduce some html and css ********】

***html***

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

Note: The above html format only simulates the cursor, Enter characters Still need to rely on form elements. On the page, the author will hide the real form elements and only display the html that simulates the cursor

<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: simulated cursor Second line: 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;
}

【****************** **************** Officially starting to introduce JS ******************************】

**Left Arrow**

1. If no text is entered, press the left arrow, and the cursor is still at the left value of 0 s position.

2. After entering text (ie: the value of the text box is not empty), press the left arrow and the cursor moves to the left.

Restrictions: When moving to a position where the left value is 0, even if you continue to press the left arrow, the cursor will not continue to move to the left [The cursor can only move if its 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. If there is no text input, press the right arrow, and the cursor is still at the left value of 0 Location.

2. After entering text, press the right arrow to move the cursor to the right.

Restrictions: When moving behind the last character of the text content, even if you continue to press the right arrow, the cursor will not continue to 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';
     }
}

**Backspace key**

1. When no character exists, press delete key, the simulated cursor will not move to the left, but will remain at the original position

2. Delete a character, and the cursor position will move one unit to the left (6px 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 keys**

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

Question: Why does the author assign the value of the input box to the p element? This line of code innerHTML [aP.innerHTML=chatting_msg.value;] is placed in the keyup event handling program?

When the event is keydown (or keypress), the value of the text box is assigned to the innerHTML of the p element. In actual circumstances, if two characters 'ab' are entered, But only the first character 'a' is displayed within the p element.

To put it simply, keydown or keypress has no problem with displaying characters in the text box itself. It means that as many characters as you input will be displayed, but for text content to be displayed in the p element, It will "react a beat slower".

[Tips: The author has not done any processing for other non-character keys]

[****************** ************ Replenish******************************】

1. In order not to affect the correct positioning of the cursor when the backspace key is pressed, the "move" function needs to be canceled when the backspace key is pressed

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

2. JM that exists in the code .xxxx, is the author's code base

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

JM.removeHandler(...): Remove event handler

JM.getStyle(...): Get the value of computer style

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

The above is the detailed content of Code details of JavaScript custom text box cursor. For more information, please follow other related articles on the PHP Chinese website!