JQuery implements a simple Date input formatting control _ jquery

This article will share with you the methods and ideas for javascript to implement simple Date input formatting controls. It is very meticulous and practical. We recommend over one hundred lines of javascript code to our friends.

First

Html code

Date:

Set the input element class to hhm-dateInputer. Use this class to bind the Date input control.

Js Code

The jQuery library is used here to select elements and bind events.

The Code is as follows:

Because there are a lot of operations to get and set the cursor position, I used several tool functions introduced in the previous blog.

The Code is as follows:

// Obtain the 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 the 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 boundary to the start point.
Range. move ("character", index); // place the cursor in the index
Range. select ();
}
}
// Obtain the 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); // move the cursor to 0.
// Here it must be moveEnd first and then moveStart
// If the left boundary is set to be greater than the right boundary, the browser automatically sets the right boundary to be equal to the left boundary.
Range. moveEnd ("character", rightIndex );
Range. moveStart ("character", leftIndex );
Range. select ();
}
}

------------------------- Boom! -----------------------

Let's talk about the main ideas.You can draw a picture here, but I don't know how to draw it.

First, find the element named hhm-dateInputer.

Bind two event handler functions to it. Keydown, focus, blur

Focus

If the content of the input element is null, set the initial value "____-__-__"

Blur (thanks to the suggestions from my friends in the comments below, and this event is more perfect)

If the content of the input element is the initial value "____-_", set the value to null ""

Keydown

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

1. First, obtain the keyCode value from the event object. When the value is determined as a number, the underline next to the number is deleted.
2. the keyCode value indicates that when the key is deleted, the number is deleted and an underline is added.
3. In other cases of keyCode, false is returned to prevent character input.

The setTimeout function is used in the first two steps to perform some operations. This function is used because the key characters in the keyup event have not actually been applied to the text box. The setTimeout operation can solve this problem.

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

The Code is as follows:

// Set the cursor to the correct position
Function resetCursor (elem ){
Var value = elem. value;
Var index = value. length;
// When you select and delete some text, you can only set the content to the initial format.
If (elem. value. length! = DateStr. length ){
Elem. value = dateStr;
}
// Place the cursor in front of the first _ underline
// Put the underline at the end
Var temp = value. search (/_/);
Index = temp>-1? Temp: index;
SetCursor (elem, index );
}

The complete js Code is pasted below.

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; // input box of the current trigger event.
Var key = event. keyCode;
Var cursorIndex = getCursor (that );
// Enter a number
If (key> = 48 & key <= 57 ){
// If the cursor is at the end of the date or the next character of the cursor is "-", false is returned to prevent the character from being displayed.
If (cursorIndex = dateStr. length | that. value. charAt (cursorIndex) = "-") {return false ;}
// Returns false if the string is not underlined.
If (that. value. search (/_/) ===- 1) {return false ;}
Var fron = that. value. substring (0, cursorIndex); // text before the cursor
Var reg =/(\ d )_/;
SetTimeout (function () {// After setTimeout, the character has been entered into the text
// Text after the cursor
Var end = that. value. substring (cursorIndex, that. value. length );
// Remove the underline _
That. value = fron + end. replace (reg, "$1 ");
// Find a proper position to insert the cursor.
ResetCursor (that );
}, 1 );
Return true;
// "Backspace" deletion key
} Else if (key = 8 ){
// The cursor cannot be deleted when it is at the beginning. However, you can delete all selected texts.
If (! CursorIndex &&! GetSelection (that). length) {return false ;}
// The strip is being deleted.
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 null
If (that. value = ""){
That. value = "____-__-__";
ResetCursor (that );
}
// Underline the deleted location
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 you select and delete some text, you can only set the content 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
// Put the underline 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 boundary to the start point.
Range. move ("character", index); // place the cursor in the index
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); // move the cursor to 0.
// Here it must be moveEnd first and then moveStart
// If the left boundary is set to be greater than the right boundary, the browser automatically sets the right boundary to be equal to the left boundary.
Range. moveEnd ("character", rightIndex );
Range. moveStart ("character", leftIndex );
Range. select ();
}
}

Conclusion

This plug-in may need to be improved.

The interface for binding this plug-in to elements by calling js is missing

There may be bugs in the plug-in.

If you have any questions about the above Code, please do not give me any further advice.

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