jQuery implements simple date input formatting control

There are more than a hundred lines of js code.

First the renderings

html code

Date:

Set the input element class name to hhm-dateInputer, and use this class to bind the date input control.

js code

The jQuery library is used here, mainly used for selecting elements and binding events.

Copy code The code is as follows: http://code.jquery.com/jquery-1.9.1.min.js"> > Because there are a lot of operations to get and set the cursor position, several tool functions introduced in the previous blog are used.

Copy code The code is as follows: //Get cursor position function getCursor(elem) { //IE 9, 10, other browsers If (elem.selectionStart !== undefined) { return elem.selectionStart; } else { //IE 6,7,8 var range = document.selection.createRange(); range.moveStart("character", -elem.value.length); var len = range.text.length; return len; } } //Set cursor position function setCursor(elem, index) { //IE 9, 10, other browsers If (elem.selectionStart !== undefined) { elem.selectionStart = index; elem.selectionEnd = index; } else { //IE 6,7,8 var range = elem.createTextRange(); Range.moveStart("character", -elem.value.length); //Move the left border to the starting point range.move("character", index); //The cursor is placed at the index position range.select(); } } //Get selected text function getSelection(elem) { //IE 9, 10, other browsers If (elem.selectionStart !== undefined) { return elem.value.substring(elem.selectionStart, elem.selectionEnd); } else { //IE 6,7,8 var range = document.selection.createRange(); return range.text; } } //Set the selected range function setSelection(elem, leftIndex, rightIndex) { If (elem.selectionStart !== undefined) { //IE 9, 10, other browsers elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } else { //IE 6,7,8 var range = elem.createTextRange(); range.move("character", -elem.value.length); //The cursor moves to position 0. //Here must be moveEnd first and then moveStart //Because if the left border is set to be larger than the right border, the browser will automatically make the right border equal to the left border. range.moveEnd("character", rightIndex); range.moveStart("character", leftIndex); range.select(); } } ------------------------- Boom! ---

Let’s talk about the main ideas first. Actually, you can draw a picture here, but I don’t know how to draw it. Please give me your opinions.

First find the element with the class name hhm-dateInputer.

Bind two event handling functions to it. keydown, focus, blur

focus

Determine if the input element content is empty, then set its initial value to "____-__-__"

blur (Thanks to the suggestions from the friends in the comments below, this event will be even more perfect)

Determine if the input element content is the initial value "____-__-__", set its value to empty ""

keydown

Why not keyup, but keydown: We know that when the keydown event occurs, the characters on the keyboard have not yet been entered into the input box, which is very important. If necessary, we can prevent inappropriate character input in the program.

1. First get the keyCode value from the event object event. When it is judged to be a number, delete one underline after the number. 2. When the keyCode value represents the deletion of the key, delete the number and add an underline. 3. KeyCode returns false in other cases, preventing character input.

The setTimeout function will be used in the first and second steps above to perform certain operations. This function is used because the key characters in the keyup event have not actually been applied to the text box. The operation in setTimeout can solve this problem.

In addition, there is a very important method resetCursor in the code. This method is called multiple times in the program to set the cursor to the appropriate input position.

Copy code The code is as follows: //Set the cursor to the correct position function resetCursor(elem) { var value = elem.value; var index = value.length; //When the user selects and deletes some text, the content can only be set to the initial format. If (elem.value.length !== dateStr.length) { elem.value = dateStr; } //Place the cursor in front of the first _underline //If no underline is found, put it at the end var temp = value.search(/_/); Index = temp > -1 ? temp : index; setCursor(elem, index); } The complete js code is posted below.

Copy code The code is as follows: $(function(){ var inputs = $(".hhm-dateInputer"); var dateStr = "____-__-__"; inputs.each(function(index,elem){ var input = $(this); input.on("keydown",function(event){ var that = this; //The input box that currently triggers the event. var key = event.keyCode; var cursorIndex = getCursor(that); to If(key >= 48 && key //If the cursor is at the end of the date or the next character of the cursor is "-", return false to prevent the character from being displayed. If(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;} //When there is no underline in the string, return false If(that.value.search(/_/) === -1){return false;} var fron = that.value.substring(0,cursorIndex); //Text before the cursor var reg = /(d)_/; setTimeout(function(){ //The characters have been entered into the text after setTimeout //Text after the cursor var end = that.value.substring(cursorIndex,that.value.length); //Remove the underscore after the newly inserted number_ That.value = fron end.replace(reg,"$1"); resetCursor(that); },1); return true; //"Backspace" delete key }else if(key == 8){ // cannot be deleted when the cursor is at the front. But consider deletion when all text is selected If(!cursorIndex && !getSelection(that).length){ return false;} //Handling of underscores encountered during deletion If(that.value.charAt(cursorIndex -1) == "-"){ var ar = that.value.split(""); ar.splice(cursorIndex-2,1,"_"); That.value = ar.join(""); resetCursor(that); return false; } setTimeout(function(){ //Reset when the value is empty If(that.value === "") { That.value = "____-__-__"; resetCursor(that); } //The deleted position is underlined var cursor = getCursor(that); var ar = that.value.split(""); ar.splice(cursor,0,"_"); That.value = ar.join(""); resetCursor(that); },1); return true; } return false; }); input.on("focus",function(){ If(!this.value){ This.value = "____-__-__"; } resetCursor(this); }); input.on("blur",function(){ If(this.value === "____-__-__"){ This.value = ""; } }); }); //Set the cursor to the correct position Function resetCursor(elem){ var value = elem.value; var index = value.length; //When the user selects and deletes some text, the content can only be set to the initial format. If(elem.value.length !== dateStr.length){ elem.value = dateStr; } var temp = value.search(/_/); index = temp> -1? temp: index; setCursor(elem,index); //Place the cursor in front of the first _underline //If no underline is found, put it at the end } }); function getCursor(elem){ //IE 9, 10, other browsers If(elem.selectionStart !== undefined){ return elem.selectionStart; } else{ //IE 6,7,8 var range = document.selection.createRange(); range.moveStart("character",-elem.value.length); var len = range.text.length; return len; } } function setCursor(elem,index){ //IE 9, 10, other browsers If(elem.selectionStart !== undefined){ elem.selectionStart = index; elem.selectionEnd = index; } else{//IE 6,7,8 var range = elem.createTextRange(); Range.moveStart("character",-elem.value.length); //Move the left border to the starting point range.move("character",index); //Place the cursor at the index position range.select(); } } function getSelection(elem){ //IE 9, 10, other browsers If(elem.selectionStart !== undefined){ return elem.value.substring(elem.selectionStart,elem.selectionEnd); } else{ //IE 6,7,8 var range = document.selection.createRange(); return range.text; } } function setSelection(elem,leftIndex,rightIndex){ If(elem.selectionStart !== undefined){ //IE 9, 10, other browsers elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } else{//IE 6,7,8 var range = elem.createTextRange(); range.move("character",-elem.value.length); //The cursor moves to position 0. //Here must be moveEnd first and then moveStart //Because if the left border is set to be larger than the right border, the browser will automatically make the right border equal to the left border. Range.moveEnd("character",rightIndex); Range.moveStart("character",leftIndex); range.select(); } } Conclusion

This plug-in may still have some areas that need improvement.

Lack of an interface to bind this plug-in to elements via js calls

The plug-in may have some bugs

If there are any problems with the above code, please feel free to let me know.

The above is the entire content of this article, I hope you all like it.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

jQuery implements simple date input formatting control_jquery