Was ist eine Vanilla JS oder jQuery-Lösung, die alle Inhalte eines Textfeldes auswählen wird, wenn das Textfeld Fokus erhält?
Antworten
Zu viele Anzeigen?Ich konnte die Antwort von Zach leicht verbessern, indem ich einige Funktionsaufrufe eingebaut habe. Das Problem mit dieser Antwort ist, dass sie onMouseUp vollständig deaktiviert und dadurch verhindert, dass Sie im Textfeld herumklicken, 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 der Antwort von Zach. Es funktioniert perfekt in IE, funktioniert überhaupt nicht in Chrome, und arbeitet mit wechselnden Erfolg in FireFox (buchstäblich jedes zweite Mal). Wenn jemand eine Idee hat, wie man es zuverlässig in FF oder Chrome arbeiten, bitte teilen.
Wie auch immer, ich dachte mir, ich teile mit, was ich kann, um das Ganze ein bisschen netter zu machen.
$('input').focus(function () {
var self = $(this);
setTimeout(function () {
self.select();
}, 1);
});
Edit: Auf Anfrage von @DavidG kann ich keine Details nennen, weil ich nicht sicher bin, warum das funktioniert, aber ich glaube, es hat etwas mit dem Fokus-Ereignis zu tun, das sich nach oben oder unten ausbreitet, oder was auch immer es tut, und das Eingabeelement erhält die Benachrichtigung, dass es den Fokus erhalten hat. Das Einstellen des Timeouts gibt dem Element einen Moment, um zu erkennen, dass es dies getan hat.
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.