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

Question

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 l'Si prega di inserire l'ID utente messaggio . Tuttavia, ho scoperto che l'utente deve fare clic su 3 volte per selezionare tutto il testo (in questo caso è Immettere l'ID utente).

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

Edit:

Scusa, ho dimenticato di dire: devo utilizzare l'ingresso type="text"

Answer 1

È possibile utilizzare questo frammento javascript:

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

Ma a quanto pare non funziona su Safari mobile. In questi casi è possibile utilizzare:

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

Answer 2

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

Click 1 - Impostare lo stato attivo

Clicca 2/3 (doppio clic) - Selezionare il testo

È possibile impostare attenzione sul TextBox quando la pagina viene caricata per ridurre il " seleziona "per un singolo evento doppio clic.

Answer 3

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 chiaro per più elementi.

Answer 4

Html (dovrete mettere l'attributo onclick su ogni ingresso che si desidera lavorare per nella pagina)

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

O una scelta migliore

jQuery (questo sarà il lavoro per ogni ingresso testo nella pagina, non c'è bisogno di cambiare il vostro 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> 

Answer 5

Prova:

0.123.

onclick="this.select()" 

Funziona benissimo per me.

Answer 6

So che questo è vecchio, ma l'opzione migliore è quella di utilizzare ora il nuovo attributo placeholder HTML se possibile:

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

Questo farà sì che il testo da mostrare se non viene inserito un valore, eliminando la necessità di seleziona il testo o cancella gli input.

Answer 7

Effettivamente, utilizzare onclick="this.select();" ma ricordarsi di non combinarlo con disabled="disabled" - non funzionerà quindi e sarà necessario selezionare manualmente o fare clic su multi-clic per selezionare, ancora. Se si desidera bloccare il valore del contenuto da selezionare, combinare con l'attributo readonly.

Answer 8

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

Ciò che ha funzionato per me è stata la dichiarazione di una variabile, selectSearchTextOnClick e impostazione 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(). Quindi ho un gestore di eventi sfocato che lo imposta su true.

I risultati finora sembrano il comportamento che mi sarei aspettato.

(Edit: ho trascurato di dire che avevo cercato di prendere il caso di messa a fuoco, come qualcuno ha suggerito, ma che non funziona: dopo l'evento di messa a fuoco, l'evento click può sparare, immediatamente deselezionando il testo).

Answer 9

Le soluzioni precedentemente pubblicati hanno due stranezze:

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

Ecco una soluzione completa che seleziona tutto il testo a fuoco, ma consente di selezionare uno specifico punto del cursore dopo la messa a fuoco.

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

Answer 10

Questa domanda ha opzioni per quando .select() non funziona su piattaforme mobili: Programmatically selecting text in an input field on iOS devices (mobile Safari)

Answer 11

Usa "segnaposto" invece di "valore" nel vostro campo di input.

Answer 12

Se si utilizza AngularJS, è possibile utilizzare una direttiva personalizzato 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ò solo usare in questo modo:

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

Il campione è con requirejs - così la prima e l'ultima riga possono essere saltate se si utilizza qualcos'altro.

Answer 13

Se qualcuno vuole fare questo a pagina carico w/jQuery (dolce per 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 this palo. Grazie a CSS-Tricks.com

Answer 14

Le risposte elencate sono parziali secondo me. Ho collegato sotto due esempi di come farlo in Angular e con JQuery.

Questa soluzione ha le seguenti caratteristiche:

• funziona per tutti i browser che supportano JQuery, Safari, Chrome, IE, Firefox, ecc
• Lavori per la PhoneGap/Cordova: Android e iOS.
• Seleziona tutto solo una volta dopo l'immissione viene messa a fuoco fino alla sfocatura successiva e quindi mette a fuoco
• È possibile utilizzare più ingressi e non eseguire il glitch.
• direttiva angolare ha un grande ri-utilizzo è sufficiente aggiungere 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; 
     }); 
    } 
    }; 
}]); 

Answer 15

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

e codice javascript senza impegno

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

Answer 16

È sempre possibile utilizzare document.execCommand (supported in all major browsers)

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

Seleziona tutto il testo nell'elemento attualmente focalizzato.

Answer 17

messa a fuoco automatica di ingresso, con l'evento onfocus:

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

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

Answer 18

La soluzione esatta di quello che hai chiesto è:

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

Ma immagino, si sta cercando di mostrare "Si prega di inserire l'ID utente" come segnaposto o accennare nell'input. Quindi, è possibile utilizzare il seguente come una soluzione più efficiente:

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

Answer 19

Se si sta solo cercando di avere il testo segnaposto che viene sostituito quando un utente seleziona l'elemento allora è ovviamente migliori pratiche da usare placeholder attribuiscono al giorno d'oggi . Tuttavia, se si desidera selezionare tutto il valore corrente quando un campo diventa attivo, una combinazione di risposte @Cory House e @Toastrackenigma sembra essere la più canonica. Utilizzare gli eventi focus e focusout, con i gestori che impostano/rilasciano l'elemento attivo corrente e selezionano tutto quando sono focalizzati.Un/example dattiloscritto angular2 è la seguente (ma sarebbe banale da convertire in js vaniglia):

Template:

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