jQuery implementiert die einfache Datumseingabeformatierung control_jquery

Es gibt mehr als hundert Zeilen JS-Code.

Zuerst die Renderings

HTML-Code

Datum:

Setzen Sie den Klassennamen des Eingabeelements auf hhm-dateInputer und verwenden Sie diese Klasse, um das Datumseingabesteuerelement zu binden.

JS-Code

Hier wird die jQuery-Bibliothek verwendet, die hauptsächlich zum Auswählen von Elementen und zum Binden von Ereignissen verwendet wird.

Code kopieren Der Code lautet wie folgt: http://code.jquery.com/jquery-1.9.1.min.js"> > Da zum Abrufen und Festlegen der Cursorposition viele Vorgänge erforderlich sind, werden mehrere im vorherigen Blog eingeführte Werkzeugfunktionen verwendet.

Code kopieren Der Code lautet wie folgt: //Cursorposition abrufen Funktion getCursor(elem) { //IE 9, 10, andere Browser If (elem.selectionStart !== undefiniert) { 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; } } //Cursorposition festlegen Funktion setCursor(elem, index) { //IE 9, 10, andere Browser If (elem.selectionStart !== undefiniert) { elem.selectionStart = index; elem.selectionEnd = index; } else { //IE 6,7,8 var range = elem.createTextRange(); Range.moveStart("character", -elem.value.length); //Bewegen Sie den linken Rand zum Startpunkt range.move("character", index); //Der Cursor wird an der Indexposition platziert range.select(); } } //Ausgewählten Text abrufen Funktion getSelection(elem) { //IE 9, 10, andere Browser If (elem.selectionStart !== undefiniert) { return elem.value.substring(elem.selectionStart, elem.selectionEnd); } else { //IE 6,7,8 var range = document.selection.createRange(); return range.text; } } //Legen Sie den ausgewählten Bereich fest Funktion setSelection(elem, leftIndex, rightIndex) { If (elem.selectionStart !== undefiniert) { //IE 9, 10, andere Browser elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } else { //IE 6,7,8 var range = elem.createTextRange(); range.move("character", -elem.value.length); //Der Cursor bewegt sich auf Position 0. //Hier muss zuerst moveEnd und dann moveStart stehen //Denn wenn der linke Rand größer als der rechte Rand eingestellt ist, gleicht der Browser automatisch den rechten Rand dem linken Rand an. range.moveEnd("character", rightIndex); range.moveStart("character", leftIndex); range.select(); } } --------- Boom!

Lassen Sie uns zunächst über die Hauptideen sprechen. Eigentlich kannst du hier ein Bild zeichnen, aber ich weiß nicht, wie ich es zeichnen soll. Sag mir bitte deine Meinung.

Suchen Sie zunächst das Element mit dem Klassennamen hhm-dateInputer.

Binden Sie zwei Ereignisbehandlungsfunktionen daran. Keydown, Fokus, Unschärfe

Fokus

Stellen Sie fest, ob der Inhalt des Eingabeelements leer ist, und setzen Sie dann seinen Anfangswert auf „____-__-__“

Unschärfe (Dank der Vorschläge der Freunde in den Kommentaren unten wird diese Veranstaltung noch perfekter)

Stellen Sie fest, ob der Inhalt des Eingabeelements den Anfangswert „____-__-__“ hat, und setzen Sie seinen Wert auf leer „“

Taste nach unten

Warum nicht Keyup, sondern Keydown: Wir wissen, dass beim Eintreten des Keydown-Ereignisses die Zeichen auf der Tastatur noch nicht in das Eingabefeld eingegeben wurden, was sehr wichtig ist. Bei Bedarf können wir unangemessene Zeicheneingaben im Programm verhindern.

1. Rufen Sie zunächst den keyCode-Wert aus dem Ereignisobjektereignis ab. Wenn es sich um eine Zahl handelt, löschen Sie einen Unterstrich nach der Zahl. 2. Wenn der keyCode-Wert das Löschen des Schlüssels darstellt, löschen Sie die Zahl und fügen Sie eine Unterstreichung hinzu. 3. KeyCode gibt in anderen Fällen false zurück und verhindert so die Zeicheneingabe.

Die Funktion setTimeout wird im ersten und zweiten Schritt oben verwendet, um bestimmte Vorgänge auszuführen. Diese Funktion wird verwendet, da die Schlüsselzeichen im Keyup-Ereignis nicht tatsächlich auf das Textfeld angewendet wurden. Die Operation in setTimeout kann dieses Problem lösen.

Darüber hinaus gibt es im Code eine sehr wichtige Methode resetCursor. Diese Methode wird im Programm mehrmals aufgerufen, um den Cursor an die entsprechende Eingabeposition zu setzen.

Code kopieren Der Code lautet wie folgt: //Setze den Cursor an die richtige Position Funktion resetCursor(elem) { var value = elem.value; var index = value.length; //Wenn der Benutzer Text auswählt und löscht, kann der Inhalt nur auf das Anfangsformat eingestellt werden. If (elem.value.length !== dateStr.length) { elem.value = dateStr; } //Platzieren Sie den Cursor vor dem ersten _underline //Wenn keine Unterstreichung gefunden wird, fügen Sie sie am Ende ein var temp = value.search(/_/); Index = temp > -1 ? temp : index; setCursor(elem, index); }

Der vollständige js-Code wird unten veröffentlicht.

Code kopieren Der Code lautet wie folgt: $(function(){ var inputs = $(".hhm-dateInputer"); var dateStr = "____-__-__"; inputs.each(function(index,elem){ var input = $(this); input.on("keydown",function(event){ var that = this; //Das Eingabefeld, das derzeit das Ereignis auslöst. var key = event.keyCode; varcursorIndex = getCursor(that); Zu If(key >= 48 && key //Wenn sich der Cursor am Ende des Datums befindet oder das nächste Zeichen des Cursors „-“ ist, geben Sie „false“ zurück, um zu verhindern, dass das Zeichen angezeigt wird. If(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;} //Wenn die Zeichenfolge keine Unterstreichung enthält, wird „false“ zurückgegeben If(that.value.search(/_/) === -1){return false;} var fron = that.value.substring(0,cursorIndex); //Text vor dem Cursor var reg = /(d)_/; setTimeout(function(){/ //Die Zeichen wurden nach setTimeout in den Text eingegeben //Text nach dem Cursor var end = that.value.substring(cursorIndex,that.value.length); //Entferne den Unterstrich nach der neu eingefügten Zahl_ That.value = von end.replace(reg,"$1"); resetCursor(that); },1); return true; //Löschtaste „Rücktaste“ }else if(key == 8){ // kann nicht gelöscht werden, wenn sich der Cursor im Vordergrund befindet. Erwägen Sie jedoch das Löschen, wenn der gesamte Text ausgewählt ist If(!cursorIndex && !getSelection(that).length){ return false;} //Behandlung von Unterstrichen, die beim Löschen auftreten 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(){ //Zurücksetzen, wenn der Wert leer ist If(that.value === "") { That.value = "____-__-__"; resetCursor(that); } //Die gelöschte Position ist unterstrichen varcursor = 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 = ""; } }); }); //Setze den Cursor an die richtige Position Funktion resetCursor(elem){ var value = elem.value; var index = value.length; //Wenn der Benutzer Text auswählt und löscht, kann der Inhalt nur auf das Anfangsformat eingestellt werden. If(elem.value.length !== dateStr.length){ elem.value = dateStr; } var temp = value.search(/_/); index = temp> -1? temp: index; setCursor(elem,index); //Platzieren Sie den Cursor vor dem ersten _underline //Wenn keine Unterstreichung gefunden wird, fügen Sie sie am Ende ein } }); Funktion getCursor(elem){ //IE 9, 10, andere Browser If(elem.selectionStart !== undefiniert){ 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; } } Funktion setCursor(elem,index){ //IE 9, 10, andere Browser If(elem.selectionStart !== undefiniert){ elem.selectionStart = index; elem.selectionEnd = index; } else{//IE 6,7,8 var range = elem.createTextRange(); Range.moveStart("character",-elem.value.length); //Bewegen Sie den linken Rand zum Startpunkt range.move("character",index); //Platzieren Sie den Cursor an der Indexposition range.select(); } } Funktion getSelection(elem){ //IE 9, 10, andere Browser If(elem.selectionStart !== undefiniert){ return elem.value.substring(elem.selectionStart,elem.selectionEnd); } else{ //IE 6,7,8 var range = document.selection.createRange(); return range.text; } } Funktion setSelection(elem,leftIndex,rightIndex){ If(elem.selectionStart !== undefiniert){ //IE 9, 10, andere Browser elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } else{//IE 6,7,8 var range = elem.createTextRange(); range.move("character",-elem.value.length); //Der Cursor bewegt sich auf Position 0. //Hier muss zuerst moveEnd und dann moveStart stehen //Denn wenn der linke Rand größer als der rechte Rand eingestellt ist, gleicht der Browser automatisch den rechten Rand dem linken Rand an. Range.moveEnd("character",rightIndex); Range.moveStart("character",leftIndex); range.select(); } } Fazit

Dieses Plug-in weist möglicherweise noch einige Bereiche auf, die verbessert werden müssen.

Fehlen einer Schnittstelle, um dieses Plug-in über js-Aufrufe an Elemente zu binden

Das Plug-in kann einige Fehler aufweisen

Wenn es Probleme mit dem oben genannten Code gibt, teilen Sie mir dies bitte mit.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.