jquery input wählt alle im Fokus aus

325

Ich verwende diesen Code, um zu versuchen, den gesamten Text im Feld auszuwählen, wenn sich ein Benutzer auf das Feld konzentriert. Was passiert ist, es wählt alle für eine Sekunde aus, dann ist es nicht ausgewählt und der Tippcursor bleibt dort, wo ich geklickt habe ...

$("input[type=text]").focus(function() {
   $(this).select();
});

Ich möchte, dass alles ausgewählt bleibt.

Tim
quelle
Welcher Browser scheint in FF für mich in Ordnung zu sein?
R0MANARMY
8
Chrome = fehlgeschlagen für diesen
wowo_999
1
Ich habe Chrome verwendet, aber .click () löst das Problem :)
Tim
4
Hinweis: Die hier akzeptierte Antwort löst nur die Hälfte des Problems. Dadurch funktioniert die Auswahl, es ist jedoch schwierig, die Auswahl mit nachfolgenden Klicks aufzuheben. Eine bessere Lösung finden Sie hier: stackoverflow.com/questions/3380458/…
DEZA

Antworten:

480

Versuchen Sie es mit clickanstelle von focus. Es scheint sowohl für Maus- als auch für Schlüsselereignisse zu funktionieren (zumindest auf Chrome / Mac):

jQuery <Version 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery Version 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Hier ist eine Demo

karim79
quelle
62
Das Problem ist, dass Sie einen Teil des Textes nicht mehr mit der Maus auswählen können. Sobald ein Klick erfolgt, wird der Volltext ausgewählt.
Helin Wang
6
Für mich keine praktikable Lösung. Dies schafft das von Wang beschriebene Problem.
Marquez
1
Im Folgenden finden Sie eine Lösung von Nianpeng, die auch mit der Auswahl von Maustext funktioniert.
Philibert Perusse
4
@AwQiruiGuo $ .fn.on ('click', ..) kann weniger Speicher verbrauchen und für dynamisch hinzugefügte untergeordnete Elemente arbeiten.
Ricky Boyce
7
Dies funktioniert nicht zum Fokussieren eines Feldes beim Tabulieren.
Colin Breame
65

Ich denke, was passiert, ist Folgendes:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Eine Problemumgehung besteht möglicherweise darin, select () asynchron aufzurufen, sodass es vollständig nach focus () ausgeführt wird:

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});
Piskvor verließ das Gebäude
quelle
3
$ ("input [type = text]"). focus (function () {var save_this = $ (this); window.setTimeout (function () {save_this.select ();}, 100);});
Etienne
@etienne: Oh, guter Punkt: Die Handhabung von thisist in solchen Bereichen etwas unerwartet. Ich werde den Code aktualisieren.
Piskvor verließ das Gebäude
3
Ein Timeout-Wert von 0 scheint ebenfalls in Ordnung zu sein, und die Funktion "focusin ()" funktioniert auch mit dieser Methode.
Tanguy
4
Ja, Sie müssen nicht einmal einen Punkt festlegen. 0 reicht aus, da Timeouts am Ende des aktuellen Aufrufstapels ausgeführt werden. Dies bedeutet, dass alle
Fokus-
1
Timeout 0 scheint das Problem zu haben, dass das "Klick" -Ereignis in einem späteren Frame ausgelöst werden kann, wodurch die Auswahl der Box wieder aufgehoben wird. Ich finde, dass Timeout 10 ziemlich gut zu funktionieren scheint - keine merkliche Verzögerung, aber zuverlässiger als 0.
Philh
57

Ich denke, das ist eine bessere Lösung. Im Gegensatz zur einfachen Auswahl in einem Onclick-Ereignis wird die Auswahl / Bearbeitung von Text mit der Maus nicht verhindert. Es funktioniert mit den wichtigsten Rendering-Engines, einschließlich IE8.

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

user2072367
quelle
4
Dies funktioniert nur für vorhandene Felder. Hier ist ein Update zum Binden an neue Eingabefelder: jsfiddle.net
adriaan
Manchmal kann der Fokus ohne einen Klick gegeben werden, und dies handhabt es gut. Aus diesem Grund ist dies für mich die sauberste Antwort - auch wenn es jedes Mal, wenn die Eingabe fokussiert wird, einige baumelnde Ereignis-Listener gibt ... viel besser als setTimeout
ilovett
Dies ermöglicht keinen zweiten Klick innerhalb numerischer Eingaben, um einen anderen Teil des Textes mit der Maus auszuwählen. Das Entfernen der zweiten select()scheint jedoch zu funktionieren.
Dperish
Noch besser mit einem zusätzlichen$('input[autofocus]').select();
Daniel Bleisteiner
38

Hier gibt es einige anständige Antworten und @ user2072367 ist mein Favorit, aber es hat ein unerwartetes Ergebnis, wenn Sie sich eher über die Registerkarte als über den Klick konzentrieren. (unerwartetes Ergebnis: Um Text nach dem Fokussieren über die Registerkarte normal auszuwählen, müssen Sie ein weiteres Mal klicken.)

Diese Geige behebt diesen kleinen Fehler und speichert $ (this) zusätzlich in einer Variablen, um eine redundante DOM-Auswahl zu vermeiden. Hör zu! (:

Getestet in IE> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});
Animiertes GIF
quelle
2
Die Lösungen von +1 your und @ user2072367 sind die saubersten in diesem ganzen Thread, und ich wünschte, es gäbe eine Möglichkeit, schneller an die Spitze zu gelangen.
KyleMit
1
Funktioniert sogar, wenn der Benutzer versucht, den gesamten Text selbst auszuwählen, bravo.
Vitani
Für mich funktioniert das unter ie11 unter Windows 8.1 nicht. Es funktioniert in IE11 unter Windows 7 und Windows 10
Lars Thomas Bredland
1
@LarsThomasBredland Ich habe gerade versucht, 8.1 + ie11 zu gewinnen und es funktioniert wie erwartet. Was "funktioniert nicht" für Sie?
animiertes
Es wählt einfach nichts aus. (Ich habe auf einem anderen win8 getestet und es funktioniert dort - gleiches Betriebssystemlevel und gleiche Version)
Lars Thomas Bredland
21

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();
    });
});

Demo in jsFiddle

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); });

Fokusereignisse

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();
    });
});

Demo in Geige

KyleMit
quelle
In Firefox 31 unter Windows wählt Ihr Code den Text nur bei jedem zweiten Klick aus, wenn Sie zwischen den beiden Textfeldern klicken
Vitani
1
@Jocie, ich bin mir nicht sicher, warum es sich abwechselt, aber es sieht so aus, als würde FF die Textauswahl für den clickFall übernehmen, der weiter unten in der Pipeline liegt als mouseup. Da wir das Ende der Auswahl so spät wie möglich behandeln möchten, um die größtmögliche Chance zu haben, den Browser zu überschreiben, sollte die Verwendung von Klick anstelle von Mouseup den Trick tun. Getestet in FF, Chrome und IE.
KyleMit
1
Vielen Dank! Endlich eine Lösung, die wirklich funktioniert und in allen Browsern!
Vincent
1
Ja! Das hat auch bei mir funktioniert! Vielen Dank. Dies sollte die offizielle Antwort gewesen sein
Fandango68
1
@RiZKiT, oneschneidet es nicht als "Der Handler wird einmal pro Element und Ereignistyp ausgeführt . Er schaltet das Ereignis, das ihn ausgelöst hat, automatisch aus, aber das andere bleibt weiterhin bestehen und offkümmert sich trotzdem um beide. Siehe meine Frage: Funktion, die genau einmal für eine beliebige Anzahl von Ereignissen
ausgelöst wird
13

Dies würde die Arbeit erledigen und das Problem vermeiden, dass Sie einen Teil des Textes nicht mehr mit der Maus auswählen können.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});
Nianpeng
quelle
1
Wichtig, um die Möglichkeit zu behalten, einen Teil des Textes mit der Maus auszuwählen. Ich benutze dies und seine A1
Philibert Perusse
2
Zu viel los hier, verwenden Sie die Fokus / Mouseup-Lösung von user2072367
George
@ George user2072367 ist ziemlich gut, aber es hat einige schwerwiegende Mängel. Überprüfen Sie heraus meine Lösung (:
animiertesgif
6

Diese Version funktioniert unter iOS und behebt auch das Standard-Drag-to-Select unter Windows Chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

Anihilnin
quelle
Bearbeitet, um hässliche try / catch hinzuzufügen, um Browser zu beschwichtigen
anihilnine
5

Das Problem bei den meisten dieser Lösungen ist, dass sie beim Ändern der Cursorposition innerhalb des Eingabefelds nicht richtig funktionieren.

Das onmouseupEreignis ändert die Cursorposition innerhalb des Feldes, das danach ausgelöst wird onfocus(zumindest innerhalb von Chrome und FF). Wenn Sie das bedingungslos verwerfen, mouseupkann der Benutzer die Cursorposition nicht mit der Maus ändern.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

Der Code verhindert bedingt das mouseupStandardverhalten, wenn das Feld derzeit keinen Fokus hat. Es funktioniert für diese Fälle:

  • Klicken, wenn das Feld nicht fokussiert ist
  • Klicken, wenn das Feld den Fokus hat
  • ins Feld tippen

Ich habe dies in Chrome 31, FF 26 und IE 11 getestet.

Colin Breame
quelle
Dies funktioniert perfekt für Klickereignisse, aber wenn ich die Registerkarte verwende, um zum nächsten Eingabefeld zu wechseln, wird der Inhalt erst später ausgewählt und
abgewählt
4

Beim Lesen dieses Threads eine großartige Lösung gefunden

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});
RafaelTSCS
quelle
... was im Wesentlichen die gleiche Antwort ist wie die von Piskvor .
Oliver
Vergessen Sie nicht alle anderen HTML5-Texttypen, z. B. 'input [type = email]'
jamiebarrow
3

Ich komme aus Ende 2016 und dieser Code funktioniert nur in neueren Versionen von jquery (in diesem Fall jquery-2.1.3.js).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}
Aaron
quelle
2

Bei Verwendung von FF 16.0.2 und JQuery 1.8.3 funktionierte der gesamte Code in der Antwort nicht.
Ich benutze solchen Code und arbeite.

$("input[type=text]").focus().select();
GusDeCooL
quelle
4
Dies beantwortet nicht die Frage, wie der Inhalt eines Eingabefelds ausgewählt werden soll, wenn der Benutzer das Feld fokussiert . Dadurch wird der Code sofort fokussiert und ohne Benutzereingabe ausgewählt.
Salue
@saluce Ich verstehe nicht, was du meinst? Wenn der Fragesteller das Feld auswählt, wird der gesamte aktuelle Text ausgewählt. Und mein Code sollte das tun. Ich benutze es sogar für mein Projekt, als ich diese Antwort schreibe.
GusDeCooL
1
Dieser Code fokussiert und wählt alles aus, wenn er ausgeführt wird, aber der Code an und für sich ist nicht an ein vom Benutzer generiertes Ereignis gebunden , z. B. das Klicken auf das Textfeld. Dies führt beispielsweise dazu, $("input[type=text]").on('click', function () { $(this).focus.select(); })dass der Fokus und die Auswahl erfolgen, wenn der Benutzer auf das Feld klickt, da sie ausgeführt werden, wenn der Benutzer auf das Feld klickt. Ohne den Event-Handler beantwortet der Code die Frage nicht, daher die Abwertung und der Kommentar. Grundsätzlich haben Sie den Teil "Der gesamte aktuelle Text ist ausgewählt", aber nicht den Teil "Wenn er das Feld auswählt".
Salue
1
@GusDeCooL lustig genug (obwohl dies nicht genau das ist, was er gefragt hat) Ich wollte das gleiche Ergebnis wie Sie auf diesem :)
Robbie Averill
2
var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

Verwenden Sie clearTimeout für mehr Sicherheit, wenn Sie schnell zwischen zwei Eingängen wechseln. ClearTimeout bereinigt das alte Timeout ...

Asimov
quelle
Bitte bearbeiten Sie mit weiteren Informationen. Von Nur-Code- und "Versuchen Sie dies" -Antworten wird abgeraten, da sie keinen durchsuchbaren Inhalt enthalten und nicht erklären, warum jemand "dies versuchen" sollte. Wir bemühen uns hier, eine Ressource für Wissen zu sein.
Brian Tompsett - 莱恩 莱恩
2

Funktioniert hervorragend mit nativem JavaScript select().

$("input[type=text]").focus(function(event) {
   event.currentTarget.select();
});

oder allgemein:

$("input[type=text]")[0].select()
Zu groß.
quelle
1

Oder Sie können einfach <input onclick="select()">Works perfect verwenden.

tectiv3
quelle
nein, tut es nicht. es funktioniert für die Auswahl des Ganzen. Versuchen Sie jedoch, einen Teil des Textes manuell auszuwählen. Dies ist nicht möglich.
Sujay Phadke
1

Sie können einfachen Code verwenden:

$('#idname').select();
Rubén Ruíz
quelle
Mit der Verwendung von jQuery offensichtlich
Rubén Ruíz
0
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
Trikon
quelle
Dies wird wahrscheinlich als Antwort von geringer Qualität markiert, da es keine Erklärung dafür gibt, was los ist.
tumultous_rooster
Dein $.readyist nicht korrekt. Sie müssen eine Funktion an sie übergeben, damit sie verzögert wird, attrbis das Dokument fertig ist. Sie tun es sofort und übergeben dann die Elementsammlung an $.ready.
Doug65536
Vermeiden Sie auch "onclick", insbesondere auf diese Weise. Verwenden Sie addEventListener.
Doug65536
0

Ich requestAnimationFrame()springe immer über interne Post-Event-Mechanismen und das funktioniert perfekt in Firefox. Nicht in Chrome getestet.

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});
RP Pedraza
quelle