JS Code has more than 100 lines.
First on the effect chart
HTML code
Date: <input type= "text" id= "Dateinputer" class= "hhm-dateinputer" placeholder= "Please enter Date" >
Set the INPUT element class name to Hhm-dateinputer, this class to bind the date input control.
JS Code
A library of jquery is applied here, primarily for selecting elements and binding events.
Copy Code code as follows:
<script src= "Http://code.jquery.com/jquery-1.9.1.min.js" ></script>
Because there are a lot of get and set cursor position operation, used the previous blog introduced several tool functions.
Copy Code code 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); Left boundary move to beginning
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.
This must be moveend first and then MoveStart.
Because if the left edge is set larger than the right boundary, then the browser automatically makes the right edge equal to the left edge.
Range.moveend ("character", Rightindex);
Range.movestart ("character", Leftindex);
Range.Select ();
}
}
-------------------------boom! -----------------------
first, talk about the main ideas. in fact, can draw a picture here, but I do not know how to draw, we make suggestions.
First find the element with the class name Hhm-dateinputer.
Bind it to two event handler functions. KeyDown, Focus, Blur
Focus
To determine if the INPUT element content is empty, set its initial value to "____-__-__"
Blur (thanks to the suggestions of the small partners in the comments below, plus this event is more perfect)
Determine if the INPUT element content is an initial value of "____-__-__", the value is set to null ""
KeyDown
Why not KeyUp, but KeyDown: we know that it is important that the characters on the keyboard are not entered into the input box when the KeyDown event occurs. If necessary, we can block inappropriate character input in the program.
1. First get the KeyCode value from event object events, and when judged as a number, remove the underscore after the number.
A value of 2.keyCode indicates that when you delete a key, you delete the number and add an underscore.
The other case of 3.keyCode returns false, blocking the input of the character.
The one or two steps above will use the SetTimeout function, in which some operations are performed. This function is used because the key character in the KeyUp event does not actually work in the text box, and the action in settimeout can solve the problem.
Another important method in the code is Resetcursor, which is called repeatedly in the program to set the cursor to the appropriate input position.
Copy Code code as follows:
Set the cursor to the correct location
function Resetcursor (elem) {
var value = Elem.value;
var index = value.length;
When a user selects part of the text and deletes it, the content can only be placed as the initial format.
if (elem.value.length!== datestr.length) {
Elem.value = Datestr;
}
Put the cursor in front of the first _ underline
I can't find the underline and put it to the end.
var temp = Value.search (/_/);
index = temp >-1? Temp:index;
SetCursor (Elem, index);
}
The complete JS code is posted below.
Copy Code code 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 for the current triggering event.
var key = Event.keycode;
var cursorindex = getcursor (that);
Enter a number
if (Key >= && key <= 57) {
The cursor at the end of the date or the next character of the cursor is "-", returns false, blocking the character display.
if (Cursorindex = = Datestr.length | | that.value.charAt (cursorindex) = = "-") {return false;}
Returns False when there is no underline in the string
if (That.value.search (/_/) = = 1) {return false;}
var fron = that.value.substring (0,cursorindex); Text before the cursor
var reg =/(\d) _/;
settimeout (function () {//settimeout character has been entered into text
Text after the cursor
var end = that.value.substring (cursorindex,that.value.length);
Remove the underline after the new insert number _
That.value = fron + end.replace (Reg, "$");
Find the right place to insert the cursor.
Resetcursor (that);
},1);
return true;
"Backspace" Delete key
}else if (key = = 8) {
The cursor cannot be deleted at the front. But consider the deletion of all text selected
if (!cursorindex &&!getselection (). length) {return false;}
Processing of dashes encountered while deleting
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 value is empty
if (That.value = = "") {
That.value = "____-__-__";
Resetcursor (that);
}
Deleted position with underline
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 location
function Resetcursor (elem) {
var value = Elem.value;
var index = value.length;
When a user selects part of the text and deletes it, the content can only be placed as the initial format.
if (elem.value.length!== datestr.length) {
Elem.value = Datestr;
}
var temp = Value.search (/_/);
index = temp>-1? Temp:index;
SetCursor (Elem,index);
Put the cursor in front of the first _ underline
I can't find the underline and put it to 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); Left boundary move to beginning
Range.move ("character", index); The cursor is placed 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.
This must be moveend first and then MoveStart.
Because if the left edge is set larger than the right boundary, then the browser automatically makes the right edge equal to the left edge.
Range.moveend ("character", Rightindex);
Range.movestart ("character", Leftindex);
Range.Select ();
}
}
Conclusion
This plugin may also have some areas that need to be perfected.
Missing interface to bind this plug-in to element via JS
Plug-in may have some bugs
If there is any problem with the above code, please do not hesitate to enlighten us.
The above is the entire content of this article, I hope you can enjoy.
