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.
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.
//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.
$(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.
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn