Wählen Sie alle Inhalte des Textfelds aus, wenn es den Fokus erhält (Vanilla JS oder jQuery).

Was ist eine Vanilla JS- oder jQuery-Lösung, die den gesamten Inhalt eines Textfelds auswählt, wenn das Textfeld den Fokus erhält?

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

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

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQuery ist kein JavaScript, das in einigen Fällen einfacher zu verwenden ist.

Schauen Sie sich dieses Beispiel an:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Quelle: CSS Tricks , MDN

Dies ist nicht nur ein Chrome / Safari-Problem, ich habe auch ein ziemlich ähnliches Verhalten mit Firefox 18.0.1 festgestellt. Der lustige Teil ist, dass dies auf MSIE nicht passiert! Das Problem hierbei ist das erste Mouseup- Ereignis, bei dem die Auswahl des Eingabeinhalts aufgehoben werden muss. Ignorieren Sie also einfach das erste Vorkommen.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

Der timeOut-Ansatz verursacht ein seltsames Verhalten. Wenn Sie jedes Mouseup-Ereignis blockieren, können Sie die Auswahl nicht entfernen, indem Sie erneut auf das Eingabeelement klicken.

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Verwenden von JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Verwenden von JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Verwenden von React JS:

In der jeweiligen Komponente innerhalb der Renderfunktion -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

Meine Lösung besteht darin, eine Zeitüberschreitung zu verwenden. Scheint in Ordnung zu funktionieren

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Dies funktioniert auch unter iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Ich weiß, dass Inline-Code ein schlechter Stil ist, aber ich wollte ihn nicht in eine .js-Datei einfügen. Funktioniert ohne jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

Die Antworten hier haben mir bis zu einem gewissen Punkt geholfen, aber ich hatte ein Problem mit den Eingabefeldern für HTML5-Nummern, als ich in Chrome auf die Auf- / Ab-Schaltflächen geklickt habe.

Wenn Sie auf eine der Schaltflächen klicken und die Maus über der Schaltfläche lassen, ändert sich die Nummer ständig, als ob Sie die Maustaste gedrückt halten würden, weil das Mouseup weggeworfen wurde.

Ich habe dieses Problem gelöst, indem ich den Mouseup-Handler entfernt habe, sobald er wie folgt ausgelöst wurde:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Hoffe das hilft den Menschen in der Zukunft ...

Dies wird funktionieren, versuchen Sie dies -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Funktioniert in Safari / IE 9 und Chrome, ich hatte jedoch keine Gelegenheit, in Firefox zu testen.

Ich weiß, dass es hier bereits viele Antworten gibt - aber diese fehlt bisher; Eine Lösung, die auch mit von Ajax generierten Inhalten funktioniert:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

Ich konnte Zachs Antwort durch einige Funktionsaufrufe leicht verbessern. Das Problem mit dieser Antwort ist, dass onMouseUp vollständig deaktiviert wird, wodurch Sie daran gehindert werden, im Textfeld herumzuklicken, sobald es den Fokus hat.

Hier ist mein Code:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Dies ist eine leichte Verbesserung gegenüber Zachs Antwort. Es funktioniert perfekt im IE, überhaupt nicht in Chrome und funktioniert abwechselnd mit Erfolg in FireFox (buchstäblich jedes Mal). Wenn jemand eine Idee hat, wie es in FF oder Chrome zuverlässig funktioniert, teilen Sie dies bitte mit.

Wie auch immer, ich dachte, ich würde teilen, was ich könnte, um das ein bisschen schöner zu machen.

Wie bei @Travis und @Mari wollte ich automatisch auswählen, wenn der Benutzer darauf klickt, was bedeutet, dass das Standardverhalten von a verhindert wird mouseup Ereignisses verhindert wird, der Benutzer jedoch nicht daran . Die von mir entwickelte Lösung, die in IE11, Chrome 45, Opera 32 und Firefox 29 funktioniert (dies sind die Browser, die ich derzeit installiert habe), basiert auf der Abfolge der Ereignisse, die mit einem Mausklick verbunden sind.

Wenn Sie auf eine Texteingabe klicken, die keinen Fokus hat, werden (unter anderem) folgende Ereignisse angezeigt:

• mousedown: Als Antwort auf Ihren Klick. Die Standardbehandlung wird focusbei Bedarf erhöht und der Auswahlstart festgelegt.
• focus: Im Rahmen der Standardbehandlung von mousedown.
• mouseup: Der Abschluss Ihres Klicks, dessen Standardbehandlung das Auswahlende festlegt.

Wenn Sie auf eine Texteingabe klicken, die bereits den Fokus hat, wird das focusEreignis übersprungen. Wie @Travis und @Mari beide scharfsinnig bemerkten, muss die Standardbehandlung von mouseupnur verhindert werden, wenn das focusEreignis eintritt. Da es jedoch kein " focusnicht aufgetretenes" Ereignis gibt, müssen wir darauf schließen, was wir im mousedownHandler tun können .

@ Maris Lösung erfordert den Import von jQuery, was ich vermeiden möchte. Die Lösung von @ Travis führt dies durch Inspektion durch document.activeElement. Ich weiß nicht, warum genau seine Lösung nicht in allen Browsern funktioniert, aber es gibt eine andere Möglichkeit zu verfolgen, ob die Texteingabe den Fokus hat: Folgen Sie einfach dem focusundblur Ereignissen.

Hier ist der Code, der für mich funktioniert:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Ich hoffe, das hilft jemandem. :-)

onclick="this.focus();this.select()"

Was ist eine JavaScript- oder jQuery-Lösung, die den gesamten Inhalt eines Textfelds auswählt, wenn das Textfeld den Fokus erhält ?

Sie müssen nur das folgende Attribut hinzufügen:

onfocus="this.select()"

Zum Beispiel:

<input type="text" value="sometext" onfocus="this.select()">

(Ehrlich gesagt habe ich keine Ahnung, warum Sie etwas anderes brauchen würden.)

Dies hat bei mir funktioniert (Posting, da es nicht in Antworten, sondern in einem Kommentar steht)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Bearbeiten: Auf Anfrage von @ DavidG kann ich keine Details angeben, da ich nicht sicher bin, warum dies funktioniert, aber ich glaube, dass dies etwas damit zu tun hat, dass sich das Fokusereignis nach oben oder unten ausbreitet oder was auch immer es tut und das Eingabeelement die Benachrichtigung erhält es hat Fokus erhalten. Durch Festlegen des Zeitlimits erhält das Element einen Moment Zeit, um zu erkennen, dass dies geschehen ist.

Wenn Sie die Ereignisse miteinander verketten, entfällt meines Erachtens die Verwendung, .onewie an anderer Stelle in diesem Thread vorgeschlagen.

Beispiel:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

Hinweis: Wenn Sie in ASP.NET programmieren, können Sie das Skript mit ScriptManager.RegisterStartupScript in C # ausführen:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Oder geben Sie das Skript einfach in die HTML-Seite ein, die in den anderen Antworten vorgeschlagen wurde.

Ich säe dieses irgendwo, arbeite perfekt!

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

Ich bin etwas spät zur Party, aber das funktioniert perfekt in IE11, Chrome, Firefox, ohne Mouseup (und ohne JQuery) durcheinander zu bringen.

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

Meine Lösung ist die nächste:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Mouseup funktioniert also normalerweise, wird jedoch nicht abgewählt, nachdem der Fokus durch Eingabe erhalten wurde