wake-up-neo.net

Wählen Sie den gesamten Inhalt 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?

javascriptjqueryuser-interface
282
Jon Erickson
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
343
John Sheehan
<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />
206
Zach
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
40
Yogesh Agrawal
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
40
Tomas Kirda

Dies ist nicht nur ein Chrome/Safari-Problem, ich habe ein ähnliches Verhalten mit Firefox 18.0.1 erlebt. Der lustige Teil ist, dass dies auf MSIE nicht passiert! Das Problem hier ist das erste mouseup event, das die Auswahl des Eingabeinhalts zwingt, ignorieren Sie also einfach das erste Vorkommen.

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

Der timeOut-Ansatz führt zu einem seltsamen Verhalten. Wenn Sie jedes Mouseup-Ereignis blockieren, können Sie die Auswahl durch Klicken auf das Eingabeelement nicht mehr entfernen.

19
Cizar

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

Schau dir dieses Beispiel an:

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

Von CSS Trics .

19
aaa

meine Lösung ist ein Timeout. Scheint zu funktionieren

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

Dies funktioniert auch auf iOS:

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

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

5
Kai

Ich weiß, dass Inline-Code ein schlechter Stil ist, aber ich wollte dies nicht in eine .js-Datei schreiben.

<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>
3
user3296743

Ich weiß, dass es hier schon 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(); 
    });
});
3
low_rents

Die Antworten hier haben mir bis zu einem gewissen Punkt geholfen, aber ich hatte ein Problem mit den Eingabefeldern für die HTML5-Nummer, wenn Sie in Chrome auf die Auf-/Ab-Tasten klicken.

Wenn Sie auf eine der Schaltflächen klicken und die Maus über der Schaltfläche halten, ändert sich die Nummer so, als würden Sie die Maustaste gedrückt halten, da der Mouseup weggeworfen wurde.

Ich habe das Problem gelöst, indem der Mouseup-Handler entfernt wurde, 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 ...

3
H2Os

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

Wenn Sie auf eine Texteingabe klicken, die keinen Fokus hat, erhalten Sie unter anderem folgende Ereignisse:

  • mousedown: Als Antwort auf Ihren Klick. Bei der Standardbehandlung wird ggf. focus ausgelöst und der Auswahlstart festgelegt.
  • focus: Als Teil 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 Ereignis focus übersprungen. Wie @Travis und @Mari beide scharfsinnig bemerkt haben, muss die Standardbehandlung von mouseup nur verhindert werden, wenn das focus-Ereignis eintritt. Da es jedoch kein Ereignis "focus ist nicht passiert" gibt, müssen wir darauf schließen, was wir mit dem mousedown-Handler tun können.

Die Lösung von @ Mari erfordert, dass jQuery importiert wird, was ich vermeiden möchte. Die Lösung von @ Travis prüft document.activeElement. Ich weiß nicht, warum seine Lösung nicht in allen Browsern funktioniert, aber es gibt einen anderen Weg, um zu verfolgen, ob die Texteingabe den Fokus hat: Folgen Sie einfach den focus- und blur-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. :-)

2
Jonathan Gilbert

HTML:  

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

Mit JS: 

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

Mit JQuery: 

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

React Js verwenden:

In der jeweiligen Komponente inside render function -

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

Das wird funktionieren, versuchen Sie es - 

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

Funktioniert in Safari/IE 9 und Chrome, ich habe jedoch keine Möglichkeit erhalten, in Firefox zu testen.

2
Adithya Kumaranchath

Ich konnte die Antwort von Zach leicht verbessern, indem ich einige Funktionsaufrufe einbaute. Das Problem bei dieser Antwort besteht darin, dass onMouseUp vollständig deaktiviert wird, sodass Sie nicht in das Textfeld klicken können, wenn 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 der Antwort von Zach. Es funktioniert perfekt im IE, funktioniert überhaupt nicht in Chrome und funktioniert mit abwechselndem Erfolg in FireFox (buchstäblich jedes zweite Mal). Wenn jemand eine Idee hat, wie es zuverlässig in FF oder Chrome funktioniert, teilen Sie es uns bitte mit. 

Jedenfalls dachte ich, ich würde teilen, was ich könnte, um das etwas schöner zu machen.

2
Travis

Was ist eine JavaScript- oder jQuery-Lösung, die wählt den gesamten Inhalt eines Textfelds aus, wenn das Textfeld focus empfängt?

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 sonst noch etwas brauchen würden.)

1
ADTC

Das hat für mich funktioniert (Posting, da es nicht in Antworten, sondern in einem Kommentar steht)

 $("#textBox").focus().select();
1
Vijay Vepakomma
onclick="this.focus();this.select()"
1
Rahul
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Edit: Per @ DavidGs Anfrage, ich kann keine Details angeben, da ich nicht sicher bin, warum dies funktioniert, aber ich glaube, es hat etwas damit zu tun, dass sich das Fokusereignis nach oben oder unten ausbreitet oder was auch immer es tut und das Eingabeelement die Benachrichtigung erhält es hat den Fokus erhalten. Wenn Sie das Zeitlimit einstellen, erhält das Element einen Moment, um zu erkennen, dass es so ist.

0
Michael Tranchida

Wenn Sie die Ereignisse miteinander verketten, ist es meiner Meinung nach nicht erforderlich, .one zu verwenden, wie an anderer Stelle in diesem Thread vorgeschlagen.

Beispiel:

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

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 einfach das Skript in die HTML-Seite ein, die in den anderen Antworten vorgeschlagen wird. 

0
Exel Gamboa

Ich bin ziemlich spät auf der Party, aber das funktioniert perfekt in IE11, Chrome, Firefox, ohne den 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);
        });
    }
});
0
Guillaume B.

Ich säe dies irgendwo, funktioniert perfekt!

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