JavaScript Custom Text Box Cursor
- 2021-07-26 06:16:54
- OfStack
The cursor of a text box (input or textarea) cannot modify the style (except for the cursor color via color). However, I hope that when I create my own website, the cursor of the text box has its own style. Therefore, try to simulate the cursor of a text box and design a cursor with your own style. The following is the author's personal thoughts.
[* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
For keyboard operation, the basic operation of cursor is nothing more than the most basic three keys: left arrow (left arrow), right arrow (right arrow) and backspace key (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: Delete characters
[********* When talking about how to realize the basic functions of cursor through JS, first introduce some html and css ********]
***html***
<div class="cursor_module">
<p class="cursor_content"></p><span class="cursor"></span>
</div>Note: The above html format only simulates cursors, and the input characters still need to rely on form elements. On the page, the author hides the real form elements and only displays 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>
Line 1: Simulated cursor Line 2: 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;
}[***************************************** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
** Left arrowhead * *
1. If no text is entered, press the left arrow, and the cursor is still at the position where left value is 0.
2. When the text is entered (that is, the value value of the text box is not empty), press the left arrow and move the cursor to the left.
Restriction: When moving to a position where the left value is 0, the cursor will not move to the left even if you continue to press the left arrow. "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 Arrowhead **
1. If there is no text input, press the right arrow, and the cursor is still at the position where the left value is 0.
2. When the text is entered, press the right arrow and move the cursor to the right.
Restriction: When moving after the last 1 character of the text content, the cursor does not move to the right even if you continue to press the right arrow. "When the cursor's left value is equal to the width of the p element, the cursor is in the last 1 character position."
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 characters exist, press the delete key, and the simulated cursor will not move to the left and remain in its original position
2. Delete one character, and the cursor position moves 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 did the author assign the value value of the input box to the innerHTML line of the p element "aP. innerHTML = chatting_msg. value;" In the keyup event handler?
If the event is keydown (or keypress), the text box's value value is assigned to innerHTML of the p element. In fact, if two characters' ab 'are entered, only the first character' a 'is displayed within the p element.
Simply put, keydown or keypress has no problem displaying characters for the text box itself, that is, you can display as many characters as you enter, but it will be "1 beat slow" to display the text content in the p element.
[Hint: The author has not dealt with other non-character keys]
"* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
1. In order not to affect the correct positioning of the cursor when pressing the backspace key, it is necessary to cancel the "move" function when pressing the backspace key
-------JM.removeHandler(chatting_msg,'input',move,false);
2. JM. xxxx in the code is the author's code base
JM. addHandler (...): Add an event handler
JM. removeHandler (...): Delete event handler
JM. getStyle (...): Gets the value of the computer style
> > > > > > > > > > > Specific code can refer to "JavaScript Advanced Programming" this book
3. The cursor defined by the author is only suitable for inputting English, numbers and punctuation marks, and does not support inputting Chinese for the time being
"" "" "" "" "" "" 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
// No value Value, press the left arrow without moving
// Have value Value, press the right arrow and move the cursor to the left but to the front 1 You can't move after the characters
if(cCode===37 && chatting_msg.value!=''){
if(aSpan_l>0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}
//right arrow
// No value Value, press the right arrow without moving
// Have value Value, press the right arrow and move the cursor to the right but to the end 1 You can't move after the characters
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';
};
})();