Selezione di tutto il testo nell'input di testo HTML quando si fa clic

Ho il seguente codice per visualizzare una casella di testo in una pagina Web HTML.

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

Quando viene visualizzata la pagina, il testo contiene il messaggio Inserire l'ID utente . Tuttavia, ho scoperto che l'utente deve fare clic 3 volte per selezionare tutto il testo (in questo caso si prega di inserire l'ID utente ).

È possibile selezionare l'intero testo con un solo clic?

Modificare:

Scusa, ho dimenticato di dire: devo usare l'input type="text"

Puoi utilizzare questo frammento javascript:

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

Ma a quanto pare non funziona su Safari mobile. In questi casi puoi usare:

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

Le soluzioni precedentemente pubblicate hanno due stranezze:

1. In Chrome la selezione tramite .select () non si attacca - l'aggiunta di un leggero timeout risolve questo problema.
2. È impossibile posizionare il cursore nel punto desiderato dopo la messa a fuoco.

Ecco una soluzione completa che seleziona tutto il testo attivo, ma consente di selezionare un punto cursore specifico dopo lo stato attivo.

        $(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 (dovrai mettere l'attributo onclick su ogni input per cui vuoi che funzioni sulla pagina)

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

O UN'OPZIONE MIGLIORE

jQuery (funzionerà per ogni input di testo sulla pagina, non è necessario modificare il codice HTML):

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

So che questo è vecchio, ma l'opzione migliore è ora utilizzare il nuovo placeholderattributo HTML, se possibile:

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

Ciò farà apparire il testo a meno che non venga inserito un valore, eliminando la necessità di selezionare il testo o cancellare gli input.

Le risposte elencate sono parziali secondo me. Ho collegato di seguito due esempi di come eseguire questa operazione in Angular e con JQuery.

Questa soluzione ha le seguenti funzionalità:

• Funziona con tutti i browser che supportano JQuery, Safari, Chrome, IE, Firefox, ecc.
• Funziona per Phonegap / Cordova: Android e IO.
• Seleziona tutto solo una volta dopo che l'input viene messo a fuoco fino alla sfocatura successiva e quindi alla messa a fuoco
• È possibile utilizzare più ingressi e non si verificano anomalie.
• La direttiva angolare ha un grande riutilizzo semplicemente aggiungendo la direttiva select-all-on-click
• JQuery può essere modificato facilmente

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

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

Provare:

onclick="this.select()"

Mi va benissimo.

Puoi sempre usare document.execCommand( supportato in tutti i principali browser )

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

Seleziona tutto il testo nell'elemento attualmente attivo.

input autofocus, con evento onfocus:

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

Ciò consente di aprire un modulo con l'elemento desiderato selezionato. Funziona usando l'autofocus per colpire l'input, che quindi si invia un evento onfocus, che a sua volta seleziona il testo.

Nota: se prendi in considerazione onclick="this.select()", Al primo clic, verranno selezionati tutti i caratteri, dopodiché potresti voler modificare qualcosa in input e fare nuovamente clic tra i caratteri, ma selezionerà nuovamente tutti i caratteri. Per risolvere questo problema dovresti usare onfocusinvece di onclick.

In effetti, usa onclick="this.select();"ma ricorda di non combinarlo con disabled="disabled"- non funzionerà quindi e dovrai selezionare manualmente o fare più clic per selezionare, ancora. Se si desidera bloccare il valore del contenuto da selezionare, combinare con l'attributo readonly.

Ecco una versione riutilizzabile della risposta di Shoban:

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

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

In questo modo è possibile riutilizzare lo script trasparente per più elementi.

È possibile sostituire

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

Con:

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

Il segnaposto viene utilizzato per sostituire il valore in base al quale si desidera che le persone possano digitare nella casella di testo senza dover fare clic più volte o utilizzando ctrl + a. Il segnaposto lo rende quindi non un valore ma come suggerisce il nome un segnaposto. Questo è ciò che viene utilizzato in più moduli online che dice "Nome utente qui" o "Email" e quando si fa clic su di esso, "Email" scompare e si può iniziare a digitare subito.

La soluzione esatta a ciò che hai chiesto è:

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

Ma suppongo che tu stia provando a mostrare "Inserisci l'ID utente" come segnaposto o suggerimento nell'input. Quindi, è possibile utilizzare quanto segue come soluzione più efficiente:

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

Ecco un esempio in React, ma può essere tradotto in jQuery su Vanilla JS se preferisci:

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

Il trucco qui è usare onMouseDownperché l'elemento ha già ricevuto lo stato attivo quando viene attivato l'evento "click" (e quindi il activeElementcontrollo fallirà).

Il activeElementcontrollo è necessario affinché l'utente possa posizionare il cursore dove desidera senza selezionare nuovamente l'intero input.

Il timeout è necessario perché altrimenti il ​​testo verrà selezionato e quindi immediatamente deselezionato, poiché immagino che il browser esegua le parole di controllo del posizionamento del cursore.

Infine, el = ev.currentTargetè necessario in React perché React riutilizza gli oggetti evento e perderai l'evento sintetico quando il setTimeout si attiva.

Il problema con la cattura dell'evento click è che ogni clic successivo all'interno del testo lo selezionerà di nuovo, mentre l'utente probabilmente si aspettava di riposizionare il cursore.

Ciò che ha funzionato per me è stato dichiarare una variabile, selezionare SearchTextOnClick e impostarla su true per impostazione predefinita. Il gestore di clic verifica che la variabile sia ancora vera: se lo è, la imposta su false ed esegue select (). Ho quindi un gestore di eventi di sfocatura che lo riporta su true.

I risultati finora sembrano il comportamento che mi aspetto.

(Modifica: ho trascurato di dire che avevo provato a catturare l'evento focus come suggerito da qualcuno, ma non funziona: dopo che l'evento focus è stato attivato, l'evento clic può attivarsi, deselezionando immediatamente il testo).

Questa domanda ha delle opzioni per quando .select () non funziona su piattaforme mobili: Selezione programmatica del testo in un campo di input su dispositivi iOS (Safari mobile)

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

e codice javascript senza bind

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

Bene, questa è un'attività normale per un TextBox.

Fai clic su 1 - Imposta lo stato attivo

Fare clic su 2/3 (doppio clic) - Seleziona testo

È possibile impostare concentrarsi sul TextBox quando la pagina viene caricata per ridurre la "select" per un singolo evento doppio clic.

Utilizzare "segnaposto" anziché "valore" nel campo di input.

Se si utilizza AngularJS, è possibile utilizzare una direttiva personalizzata per un facile accesso:

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

Ora si può semplicemente usarlo in questo modo:

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

L'esempio è con requestjs - quindi la prima e l'ultima riga possono essere saltate se si utilizza qualcos'altro.

Se qualcuno vuole farlo al caricamento della pagina con jQuery (dolce per i campi di ricerca) ecco la mia soluzione

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

Sulla base di questo post. Grazie a CSS-Tricks.com

Se stai solo cercando di avere un testo segnaposto che viene sostituito quando un utente seleziona l'elemento, è ovviamente consigliabile utilizzare l' placeholderattributo al giorno d'oggi. Tuttavia, se si desidera selezionare tutto il valore corrente quando un campo ottiene lo stato attivo, una combinazione di risposte @Cory House e @Toastrackenigma sembra essere la più canonica. Uso focused focusouteventi, con gestori che impostano / rilasciano l'elemento di messa a fuoco corrente e selezionano tutti quando sono focalizzati. Un esempio di angular2 / dattiloscritto è il seguente (ma sarebbe banale da convertire in vanilla js):

Modello:

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

Componente:

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