Nach sorgfältiger Prüfung schlage ich dies als weitaus sauberere Lösung in diesem Thread vor:
$("input").focus(function(){
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
Das Problem:
Hier eine kleine Erklärung:
Schauen wir uns zunächst die Reihenfolge der Ereignisse an, wenn Sie mit der Maus oder der Registerkarte in ein Feld fahren.
Wir können alle relevanten Ereignisse wie folgt protokollieren:
$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
function(e) { console.log(e.type); });
Hinweis : Ich habe diese Lösung so geändert, dass sie clicknicht mehr mouseupwie später in der Ereignis-Pipeline verwendet wird, und habe laut @ Jocies Kommentar einige Probleme in Firefox verursacht
Einige Browser versuchen, den Cursor während der Ereignisse mouseupoder zu positionieren click. Dies ist sinnvoll, da Sie das Caret möglicherweise an einer Position starten und ziehen möchten, um Text hervorzuheben. Es kann keine Bezeichnung für die Caret-Position geben, bis Sie die Maus tatsächlich angehoben haben. Funktionen, die damit umgehen focus, reagieren also zu früh, sodass der Browser Ihre Positionierung überschreiben kann.
Aber das Problem ist, dass wir wirklich mit dem Fokusereignis umgehen wollen. Es zeigt uns das erste Mal, dass jemand das Feld betreten hat. Nach diesem Zeitpunkt möchten wir das Benutzerauswahlverhalten nicht mehr überschreiben.
Die Lösung:
Stattdessen focuskönnen wir im Ereignishandler schnell Listener für die Ereignisse click(Click-In) und keyup(Tab-In) anhängen, die ausgelöst werden sollen.
Hinweis : Die Eingabe eines Registerkartenereignisses wird tatsächlich im neuen Eingabefeld ausgelöst , nicht im vorherigen
Wir wollen das Event nur einmal auslösen. Wir könnten verwenden .one("click keyup), aber dies würde den Ereignishandler einmal für jeden Ereignistyp aufrufen . Stattdessen rufen wir unsere Funktion auf, sobald entweder Mouseup oder Keyup gedrückt wird. Als erstes entfernen wir die Handler für beide. Auf diese Weise spielt es keine Rolle, ob wir Registerkarten oder Mauszeiger verwenden. Die Funktion sollte genau einmal ausgeführt werden.
Hinweis : Die meisten Browser wählen natürlich den gesamten Text während eines Tab-Ereignisses aus, aber wie animiertes GIF hervorhob , möchten wir das keyupEreignis weiterhin behandeln, da das mouseupEreignis sonst immer noch verweilt, wenn wir es mit Registerkarten versehen haben. Wir hören uns beide an, damit wir uns umdrehen können Schalten Sie die Hörer aus, sobald wir die Auswahl bearbeitet haben.
Jetzt können wir anrufen, select()nachdem der Browser seine Auswahl getroffen hat, sodass wir das Standardverhalten sicher überschreiben können.
Zum zusätzlichen Schutz können wir den Funktionen und Funktionen Ereignis-Namespaces hinzufügen, damit die Methode keine anderen Listener entfernt, die möglicherweise im Spiel sind.mouseupkeyup.off()
Getestet in IE 10+, FF 28+ und Chrome 35+
Wenn Sie jQuery um eine Funktiononce erweitern möchten, die aufgerufen wird und bei einer beliebigen Anzahl von Ereignissen genau einmal ausgelöst wird :
$.fn.once = function (events, callback) {
return this.each(function () {
var myCallback = function (e) {
callback.call(this, e);
$(this).off(events, myCallback);
};
$(this).on(events, myCallback);
});
};
Dann können Sie den Code folgendermaßen weiter vereinfachen:
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});