


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.
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.
//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.
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.
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.
$(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 <= 57){
//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.

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Heutzutage werden wir unweigerlich auf einige Probleme stoßen, wie z. B. die Unfähigkeit, das Telefon einzuschalten, oder Verzögerungen, wie z. B. einen Systemabsturz, aber während der Nutzung sind Mobiltelefone zu einem unverzichtbaren Teil unseres Lebens geworden. Wir sind oft ratlos und manchmal gibt es keine Lösungen für diese Probleme. Um Ihnen bei der Lösung von Mobiltelefonproblemen zu helfen, stellt Ihnen dieser Artikel einige Methoden zur Wiederherstellung des Mobiltelefonformats und zur Wiederherstellung des normalen Betriebs Ihres Telefons vor. Sichern Sie Daten – schützen Sie wichtige Informationen wie Fotos und Kontakte vor dem Verlust während des Formatierungsvorgangs. Bevor Sie Ihr Telefon formatieren, sollten Sie zunächst daran denken, wichtige Daten und Dateien auf Ihrem Telefon zu sichern. Um die Datensicherheit zu gewährleisten oder Dateien an einen Cloud-Speicherdienst zu übertragen, können Sie sie sichern, indem Sie eine Verbindung zu einem Computer herstellen. Nutzen Sie die integrierte Wiederherstellungsfunktion des Systems – ganz einfach

Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u

HTML-Formatierungsmethode: 1. Verwenden Sie Online-HTML-Formatierungstools. 2. Verwenden Sie die mit dem Code-Editor gelieferten HTML-Formatierungstasten, z. B. Umschalt + Alt + F in Visual Studio Code. 3. Verwenden Sie Plug-Ins, z. B. in Sublime Text-HTML/CSS/JS-Prettify-Plugin 4. Verwenden Sie Befehlszeilentools wie HTML Tidy. 5. Manuelle Formatierung gemäß Codierungsstandards und -gewohnheiten.

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen

Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: <

Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wenn Sie jQuery zum Betreiben von DOM-Elementen verwenden, stoßen Sie häufig auf Situationen, in denen Sie feststellen müssen, ob ein Element ein bestimmtes Attribut hat. In diesem Fall können wir diese Funktion einfach mit Hilfe der von jQuery bereitgestellten Methoden implementieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt, um festzustellen, ob ein jQuery-Element über bestimmte Attribute verfügt, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die Methode attr() und den Operator typeof //, um zu bestimmen, ob das Element ein bestimmtes Attribut hat

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur DOM-Manipulation und Ereignisbehandlung in Webseiten verwendet wird. In jQuery wird die Methode eq() verwendet, um Elemente an einer bestimmten Indexposition auszuwählen. Die spezifischen Verwendungs- und Anwendungsszenarien sind wie folgt. In jQuery wählt die Methode eq() das Element an einer angegebenen Indexposition aus. Indexpositionen beginnen bei 0 zu zählen, d. h. der Index des ersten Elements ist 0, der Index des zweiten Elements ist 1 und so weiter. Die Syntax der eq()-Methode lautet wie folgt: $("s
