Auswahl aller Inhalte eines Textfeldes, wenn es den Fokus erhält (Vanilla JS oder jQuery)

Question

Was ist eine Vanilla JS oder jQuery-Lösung, die alle Inhalte eines Textfeldes auswählen wird, wenn das Textfeld Fokus erhält?

Answer 1

HTML :

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

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

JQuery verwenden :

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

React JS verwenden :

In der jeweiligen Komponente -

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

Answer 2

Dies ist nicht nur ein Chrome/Safari-Problem, ich habe ein ganz ähnliches Verhalten mit Firefox 18.0.1 erlebt. Der lustige Teil ist, dass dies nicht auf MSIE passieren! Das Problem hier ist die erste mouseup Ereignis, das die Abwahl des Eingabeinhalts erzwingt, also ignorieren Sie einfach das erste Auftreten.

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

Der timeOut-Ansatz führt zu einem seltsamen Verhalten, und das Blockieren jedes Mouseup-Ereignisses verhindert, dass man die Auswahl durch erneutes Klicken auf das Eingabeelement aufheben kann.

Answer 3

Meine Lösung ist die Verwendung einer Zeitüberschreitung. Scheint zu funktionieren ok

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

Answer 4

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

Answer 5

Ich weiß, Inline-Code ist schlechter Stil, aber ich wollte nicht, dies in eine .js-Datei zu setzen. 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>