it-swarm.com.de

Auswählen des gesamten Texts in der HTML-Texteingabe, wenn Sie darauf 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 . 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 dies . 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 type="text" verwenden

499
Questions

Sie können dieses Javascript-Snippet verwenden:

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

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

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
833
Boris Pavlović

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

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

Hier ist eine vollständige Lösung, die den gesamten Text im Fokus auswählt, jedoch 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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });
61
Cory House

HTML (Sie müssen das onclick-Attribut für 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 Ihre HTML-Datei ä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>
43

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

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

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

36
Thom Porter

Die aufgeführten Antworten sind meiner Meinung nach teilweise. Ich habe unten zwei Beispiele dazu in Angular und mit JQuery verlinkt.

Diese Lösung bietet folgende Funktionen:

  • Funktioniert mit allen Browsern, die JQuery, Safari, Chrome, IE, Firefox usw. unterstützen.
  • Funktioniert für Phonegap/Cordova: Android und IOs.
  • Wählt nur einmal alle 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 Direktiven-Alles-bei-Klick hinzu
  • JQuery kann leicht 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);
    }
  }
});

Angular: 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;
      });
    }
  };
}]);
12
D Prinsloo

Versuchen:

onclick="this.select()"

Es funktioniert großartig für mich.

10
Slulego

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

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

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

9
Toastrackenigma

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

6
LenArt

eingabeautofokus mit Onfocus-Ereignis:

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

Auf diese Weise können Sie ein Formular öffnen, in dem das gewünschte Element ausgewählt ist. Es funktioniert, indem der Autofokus verwendet wird, um auf die Eingabe zuzugreifen, die dann selbst ein Onfocus-Ereignis sendet, das wiederum den Text auswählt.

6
fyngyrz

Die genaue Lösung für das, was Sie gefragt haben, ist:

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

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 in 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, wird die "E-Mail" ausgeblendet und Sie können sofort mit der Eingabe beginnen.

3
Pablo

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 klare Skript für mehrere Elemente wiederverwenden.

3

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

und Javascript Code ohne Bindung

function textSelector(ele){
    $(ele).select();
}
2
Hussainsheriff

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)

2
Dean Radcliffe

Hier ist ein Beispiel in React, aber es kann auf Vanilla JS in jQuery übersetzt werden, wenn Sie es vorziehen:

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 dabei ist, onMouseDown zu verwenden, da das Element bereits den Fokus erhalten hat zu dem Zeitpunkt, an dem das Ereignis "click" ausgelöst wird (und somit die Prüfung activeElement fehlschlägt).

Das Kontrollkästchen activeElement ist erforderlich, damit der Benutzer den Cursor an der gewünschten Stelle positionieren kann, ohne ständig die gesamte Eingabe erneut auswählen zu müssen.

Die Zeitüberschreitung ist notwendig, da sonst der Text ausgewählt und dann sofort abgewählt wird, da der Browser vermutlich die Cursorpositionierung nachträglich überprüft.

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

2
mpen

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

Bei mir hat es funktioniert, eine Variable zu deklarieren, SearchTextOnClick auszuwählen und sie standardmäßig auf true zu setzen. Der Click-Handler prü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 eine Unschärfe-Ereignisbehandlungsroutine, die es wieder auf wahr setzt.

Die bisherigen Ergebnisse scheinen dem erwarteten Verhalten zu entsprechen.

(Bearbeiten: Ich habe versäumt zu sagen, dass ich versucht habe, das Fokusereignis wie vorgeschlagen abzufangen, aber das funktioniert nicht: Nach dem Auslösen des Fokusereignisses kann das Klickereignis ausgelöst werden und die Auswahl des Texts sofort aufheben.).

2
Luxocrates

Hinweis: Wenn Sie onclick="this.select()" betrachten, werden beim ersten Klick alle Zeichen ausgewählt. Danach möchten Sie vielleicht etwas in der Eingabe bearbeiten und zwischen den Zeichen klicken, dann werden wieder alle Zeichen ausgewählt . Um dieses Problem zu beheben, sollten Sie onfocus anstelle von onclick verwenden.

2
Amir Forsati

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

1
seaJay

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

Klick 1 - Fokus setzen

Klick 2/ (Doppelklick) - Text auswählen

Sie können focus für das Textfeld festlegen, wenn die Seite zum ersten Mal geladen wird, um die Auswahl auf ein einzelnes Doppelklick-Ereignis zu reduzieren.

1
RPM1984

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 ist mit requirejs - so können die erste und die letzte Zeile übersprungen werden, wenn Sie etwas anderes verwenden.

0
timtos

Wenn Sie nur versuchen, Platzhaltertext zu verwenden, der ersetzt wird, wenn ein Benutzer das Element auswählt, empfiehlt es sich heutzutage, das placeholder -Attribut 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 die Ereignisse focus und focusout mit Handlern, die das aktuelle Fokuselement festlegen/freigeben, und wählen Sie alle aus, wenn der Fokus aktiviert ist. Ein angle2/TypeScript-Beispiel sieht wie folgt aus (es wäre jedoch trivial, es in Vanilla 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); });
};
0
Eric Lease

Wenn jemand dies auf Seite laden will, 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 this Post. Vielen Dank an CSS-Tricks.com

0
Hugo Dias