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

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"

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" />

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.
            });
        });

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>

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.

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;
      });
    }
  };
}]);

Versuchen:

onclick="this.select()"

Es funktioniert großartig für mich.

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.

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.

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.

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.

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.

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.

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" />

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.

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.)

Diese Frage enthält Optionen für den Fall, dass .select () auf mobilen Plattformen nicht funktioniert: Programmgesteuertes Auswählen von Text in einem Eingabefeld auf iOS-Geräten (mobile Safari)

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();
}

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.

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

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.

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

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); });
};