Auswählen des gesamten Texts in der HTML-Texteingabe beim Klicken

554

Ich habe den folgenden Code, um ein Textfeld in einer HTML-Webseite anzuzeigen.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Wenn die Seite angezeigt wird, enthält der Text die Meldung Bitte geben Sie die Benutzer-ID ein . Ich habe jedoch festgestellt, dass der Benutzer dreimal klicken muss, um den gesamten Text auszuwählen (in diesem Fall ist es Bitte geben Sie die Benutzer-ID ein ).

Ist es möglich, den gesamten Text mit nur einem Klick auszuwählen?

Bearbeiten:

Entschuldigung, ich habe vergessen zu sagen: Ich muss die Eingabe verwenden type="text"

Fragen
quelle
6
Ein besserer Ansatz ist die Verwendung von a <label>für das Etikett und nicht von value. Sie können JS und CSS verwenden, damit es gleich aussieht, ohne so antisemantisch zu sein. dorward.me.uk/tmp/label-work/example.html hat ein Beispiel mit jQuery.
Quentin
12
Oder verwenden Sie sogar einen Platzhalter, wenn Sie in einem modernen HTML5-Projekt arbeiten.
Léo Lam
1
placeholder = "Bitte geben Sie die Benutzer-ID ein"
Marcelo Bonus

Antworten:

909

Sie können dieses Javascript-Snippet verwenden:

<input onClick="this.select();" value="Sample Text" />

Aber anscheinend funktioniert es auf Mobile Safari nicht. In diesen Fällen können Sie verwenden:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
Boris Pavlović
quelle
9
Um dies allgemeiner zu gestalten, können Sie this.idals Argument für den Klick-Handler verwenden. Besser noch, Sie könnten das getElementByIdganz beseitigen und thisals Argument durchgehen .
Asad Saeeduddin
12
Auf mobiler Safari funktioniert das nicht. Versuchen Sie stattdessen, this.setSelectionRange (0, 9999) aufzurufen.
Dean Radcliffe
43
@ DeanRadcliffe Schön! Ich würde this.setSelectionRange(0, this.value.length)stattdessen verwenden.
2grit
8
Irgendwelche Updates zur Browserunterstützung? w3schools.com/jsref/met_text_select.asp behauptet, dass es von allen Browsern unterstützt wird
Ayyash
65

Die zuvor veröffentlichten Lösungen weisen zwei Besonderheiten auf:

  1. In Chrome bleibt die Auswahl über .select () nicht erhalten. Durch Hinzufügen einer geringfügigen Zeitüberschreitung wird dieses Problem behoben.
  2. Es ist unmöglich, den Cursor nach dem Fokussieren an einer gewünschten Stelle zu platzieren.

Hier ist eine Komplettlösung, die den gesamten Text im Fokus auswählt, aber die Auswahl eines bestimmten Cursorpunkts nach dem Fokus ermöglicht.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });
Cory House
quelle
7
.on('blur', 'input', function(){focusedElement = null;})
Fügen Sie
1
eine Auszeit von 0Arbeiten für mich in Chrom und Firefox. Ich bin mir nicht sicher, woher deine Auszeit 50kommt.
Thejoshwolfe
1
Die Lösung besteht darin, onClick anstelle von onFocus zu verwenden. Funktioniert perfekt und benötigt keine komplizierten Codes.
Ismael
4
@CoryHouse spielt es keine Rolle, da Fokus über Registerkarte nativ den Text auswählen! Kein Javascript erforderlich.
Ismael
1
@CoryHouse auch nach 4 Jahren funktioniert Ihr Code wie ein Zauber. Mann, verbeug dich. Danke für diesen kleinen dreckigen Hack. Ich habe 2-3 Tage gesucht, bis ich diesen gefunden habe. : +1:
Rutvij Kothari
47

HTML (Sie müssen das onclick-Attribut auf jede Eingabe setzen, für die es auf der Seite funktionieren soll)

 <input type="text" value="click the input to select" onclick="this.select();"/>

ODER EINE BESSERE OPTION

jQuery (dies funktioniert für jede Texteingabe auf der Seite, ohne dass Sie Ihr HTML ändern müssen):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>
oLinkWebDevelopment
quelle
22
Es wäre wahrscheinlich besser, sich an das Fokusereignis zu binden, als auf diejenigen zu klicken, die durch die Formularelemente blättern.
Andrew Ensley
7
@ Andrew Das ist nicht notwendig, da der Text immer ausgewählt ist, wenn Sie durch Eingabeelemente blättern. ;-)
Nietonfir
Fokusereignisse sind fehlerhaft, das Unschärfeereignis ist andererseits nützlich, um die Validierung auszulösen und Formulare automatisch zu speichern. Funktioniert auch, wenn Sie durchblättern!
oLinkWebDevelopment
Sollte dies einwandfrei funktionieren, stellen Sie sicher, dass Sie eine aktualisierte Version von jQuery verwenden, oder verwenden Sie $ (document) .live () für ältere Versionen.
oLinkWebDevelopment
2
Sofern der Benutzer nicht bereits über jQuery verfügt, besteht eine bessere Option nicht darin, eine Abhängigkeit von einer Bibliothek eines Drittanbieters hinzuzufügen.
Ross
37

Ich weiß, dass dies alt ist, aber die beste Option ist, jetzt das neue placeholderHTML-Attribut zu verwenden, wenn möglich:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Dadurch wird der Text angezeigt, sofern kein Wert eingegeben wird, sodass kein Text ausgewählt oder Eingaben gelöscht werden müssen.

Thom Porter
quelle
2
Bitte beachten Sie, dass Platzhalter nur mit dem Doctype HTML zulässig sind.
Dogawaf
12

Die aufgeführten Antworten sind meiner Meinung nach teilweise. Ich habe unten zwei Beispiele dafür verlinkt, wie dies in Angular und mit JQuery gemacht wird.

Diese Lösung bietet die folgenden Funktionen:

  • Funktioniert für alle Browser, die JQuery, Safari, Chrome, IE, Firefox usw. unterstützen.
  • Funktioniert für Phonegap / Cordova: Android und IOs.
  • Wählt alle nur einmal aus, nachdem die Eingabe den Fokus bis zur nächsten Unschärfe und dann den Fokus erhalten hat
  • Es können mehrere Eingänge verwendet werden, und es kommt nicht zu Störungen.
  • Angular-Direktive hat eine großartige Wiederverwendung. Fügen Sie einfach die Direktive Select-All-On-Click hinzu
  • JQuery kann einfach geändert werden

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Winkel: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);
D Prinsloo
quelle
schöne eckige Lösung. Danke. obwohl ich das hasSelectedAll-Flag nicht benutze. Ich denke, dies ist eine Bestimmung für einen zweiten Klick, was bedeuten könnte, dass der Benutzer den Cursor platzieren möchte.
Tau
11

Versuchen:

onclick="this.select()"

Es funktioniert großartig für mich.

Slulego
quelle
11

Sie können immer verwenden document.execCommand( wird in allen gängigen Browsern unterstützt )

document.execCommand("selectall",null,false);

Wählt den gesamten Text im aktuell fokussierten Element aus.

Toastrackenigma
quelle
Dies scheint eine elegante Lösung zu sein. Der vollständige Code würde aussehen wie:<input type="text" onclick="document.execCommand('selectall',null,false);" />
Pipepiper
Ja, es ist meine Lieblingsmethode, um diese Art von Aufgabe zu erledigen. da es auch für contenteditableElemente funktioniert . Ich denke, Sie können es auch noch etwas eleganter machen, dh <input type="text" onfocus="document.execCommand('selectall')">- ziemlich sicher, dass Sie das entfernen können nullund falsewenn Sie sie nicht verwenden.
Toastrackenigma
Ja. onfocusscheint besser als onclick. und ja, kann man abschaffen nullund false. Vielen Dank!
Pipepiper
Ich würde zustimmen, dass dies die beste Cross-Browser-Lösung ist, mit der Einschränkung, dass das in der @ Corey House-Lösung erwähnte Timeout verwendet werden sollte, um diesen Cross-Browser kompatibel zu machen.
Eric Lease
1
Bei Verwendung onfocuswird die gesamte Seite ausgewählt, wenn in Chrome auf Eingabe geklickt wird. onclickfunktioniert gut.
Robotik
8

Eingabe-Autofokus mit Onfocus-Ereignis:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Auf diese Weise können Sie ein Formular mit dem gewünschten Element öffnen. Es funktioniert mit Autofokus, um die Eingabe zu treffen, die sich dann selbst ein Onfocus-Ereignis sendet, das wiederum den Text auswählt.

Fyngyrz
quelle
8

Hinweis: Wenn Sie berücksichtigen onclick="this.select()", werden beim ersten Klick alle Zeichen ausgewählt. Danach möchten Sie möglicherweise etwas in der Eingabe bearbeiten und erneut zwischen den Zeichen klicken, aber alle Zeichen werden erneut ausgewählt. Um dieses Problem zu beheben, sollten Sie onfocusanstelle von verwenden onclick.

Amir Fo
quelle
6

Verwenden onclick="this.select();"Sie disabled="disabled"es in der Tat, aber denken Sie daran, es nicht mit zu kombinieren - es funktioniert dann nicht und Sie müssen es manuell auswählen oder mit einem Mehrfachklick auswählen. Wenn Sie den ausgewählten Inhaltswert sperren möchten, kombinieren Sie ihn mit dem Attribut readonly.

LenArt
quelle
4

Hier ist eine wiederverwendbare Version von Shobans Antwort:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

Auf diese Weise können Sie das übersichtliche Skript für mehrere Elemente wiederverwenden.

Sean Patrick Floyd
quelle
4

Sie können ersetzen

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Mit:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Der Platzhalter wird verwendet, um den Wert so zu ersetzen, wie Sie möchten, dass Personen das Textfeld eingeben können, ohne mehrmals klicken oder Strg + a verwenden zu müssen. Platzhalter macht es so, dass es kein Wert ist, aber wie der Name schon sagt, ein Platzhalter. Dies wird in mehreren Online-Formularen verwendet, in denen "Benutzername hier" oder "E-Mail" angegeben ist. Wenn Sie darauf klicken, verschwindet "E-Mail" und Sie können sofort mit der Eingabe beginnen.

Pablo
quelle
3

Die genaue Lösung für Ihre Fragen lautet:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Aber ich nehme an, Sie versuchen, "Bitte geben Sie die Benutzer-ID ein" als Platzhalter oder Hinweis in der Eingabe anzuzeigen. Sie können also Folgendes als effizientere Lösung verwenden:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
Ayan
quelle
3

Hier ist ein Beispiel in React, das jedoch auf Vanilla JS in jQuery übersetzt werden kann, wenn Sie dies bevorzugen:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

Der Trick hier ist zu verwenden, onMouseDownda das Element zum Zeitpunkt des Auslösens des "Klick" -Ereignisses bereits den Fokus erhalten hat (und daher die activeElementPrüfung fehlschlägt).

Die activeElementÜberprüfung ist erforderlich, damit der Benutzer den Cursor an der gewünschten Stelle positionieren kann, ohne die gesamte Eingabe ständig neu auswählen zu müssen.

Das Zeitlimit ist erforderlich, da andernfalls der Text ausgewählt und dann sofort abgewählt wird, da der Browser vermutlich die Nachwörter für die Cursorpositionierung überprüft.

Und schließlich el = ev.currentTargetist dies in React erforderlich, da React Ereignisobjekte wiederverwendet und Sie das synthetische Ereignis verlieren, wenn setTimeout ausgelöst wird.

mpen
quelle
Reagieren Sie auf die neue jQuery?
vpzomtrrfrt
@vpzomtrrfrt Sicher ist: DJ / K. Ich hatte dies in React geschrieben und wollte es nicht nur für einige SO-Punkte aufheben. Nimm es oder lass es :-)
mpen
Wie ist das ein Beispiel in React ?! Dies ist eher ein Beispiel in nativem Javascript.
Cesar
2

Das Problem beim Abfangen des Klickereignisses besteht darin, dass jeder nachfolgende Klick innerhalb des Textes es erneut auswählt, während der Benutzer wahrscheinlich damit gerechnet hat, den Cursor neu zu positionieren.

Für mich hat es funktioniert, eine Variable zu deklarieren, selectSearchTextOnClick, und sie standardmäßig auf true zu setzen. Der Click-Handler überprüft, ob die Variable noch wahr ist: Wenn dies der Fall ist, setzt er sie auf false und führt select () aus. Ich habe dann einen Unschärfe-Ereignishandler, der ihn auf true zurücksetzt.

Die bisherigen Ergebnisse scheinen das erwartete Verhalten zu sein.

(Bearbeiten: Ich habe es versäumt zu sagen, dass ich versucht habe, das Fokusereignis abzufangen, wie es jemand vorgeschlagen hat, aber das funktioniert nicht: Nachdem das Fokusereignis ausgelöst wurde, kann das Klickereignis ausgelöst werden und die Auswahl des Textes wird sofort aufgehoben.)

Luxokrates
quelle
2

HTML wie dieses <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

und Javascript-Code ohne Bindung

function textSelector(ele){
    $(ele).select();
}
Hussainsheriff
quelle
4
"javascript:" wird nur in href verwendet und sollte vermieden werden.
user1133275
1

Nun, dies ist eine normale Aktivität für eine TextBox.

Klicken Sie auf 1 - Fokus setzen

Klicken Sie auf 2/3 (Doppelklick) - Wählen Sie Text aus

Sie können den Fokus auf die Textbox legen, wenn die Seite zum ersten Mal geladen wird, um die "Auswahl" auf ein einzelnes Doppelklickereignis zu reduzieren.

RPM1984
quelle
1
Auch 2 Klicks sind für die Wortauswahl und 3 für die Zeilenauswahl.
Arthur
1

Verwenden Sie in Ihrem Eingabefeld "Platzhalter" anstelle von "Wert".

seaJay
quelle
0

Wenn Sie AngularJS verwenden, können Sie eine benutzerdefinierte Direktive für den einfachen Zugriff verwenden:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Jetzt kann man es einfach so benutzen:

<input type="text" select-on-click ... />

Das Beispiel enthält requirejs - daher können die erste und die letzte Zeile übersprungen werden, wenn etwas anderes verwendet wird.

timtos
quelle
0

Wenn jemand dies beim Laden einer Seite mit jQuery (süß für Suchfelder) tun möchte, ist hier meine Lösung

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Basierend auf diesem Beitrag. Vielen Dank an CSS-Tricks.com

Hugo Dias
quelle
0

Wenn Sie nur versuchen, Platzhaltertext zu erhalten, der ersetzt wird, wenn ein Benutzer das Element auswählt, ist es placeholderheutzutage offensichtlich die beste Vorgehensweise, Attribute zu verwenden . Wenn Sie jedoch den gesamten aktuellen Wert auswählen möchten, wenn ein Feld den Fokus erhält, scheint eine Kombination aus @ Cory House- und @ Toastrackenigma-Antworten am kanonischsten zu sein. Verwenden Sie focusundfocusout Ereignisse mit Handlern, die das aktuelle Fokuselement festlegen / freigeben und alle auswählen, wenn sie fokussiert sind. Ein Angular2 / Typoskript-Beispiel lautet wie folgt (wäre jedoch trivial, um es in Vanille-js umzuwandeln):

Vorlage:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Komponente:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};
Eric Lease
quelle