Seleccionar todo el texto en la entrada de texto HTML cuando se hace clic

555

Tengo el siguiente código para mostrar un cuadro de texto en una página web HTML.

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

Cuando aparece la página, el texto contiene el mensaje Por favor ingrese el ID de usuario . Sin embargo, descubrí que el usuario debe hacer clic 3 veces para seleccionar todo el texto (en este caso es Por favor ingrese la ID de usuario ).

¿Es posible seleccionar todo el texto con solo un clic?

Editar:

Lo siento, olvidé decir: debo usar la entrada type="text"

Preguntas
fuente
66
Un mejor enfoque es usar un <label>para la etiqueta y no el value. Puede usar JS y CSS para que se vea igual, sin ser tan antisentico. dorward.me.uk/tmp/label-work/example.html tiene un ejemplo usando jQuery.
Quentin
12
O incluso use un marcador de posición si está trabajando en un proyecto HTML5 moderno.
Léo Lam
1
placeholder = "Por favor ingrese la identificación de usuario"
Marcelo Bonus

Respuestas:

910

Puede usar este fragmento de JavaScript:

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

Pero aparentemente no funciona en Safari móvil. En esos casos puedes usar:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
Boris Pavlović
fuente
99
Para hacerlo más general, puede usarlo this.idcomo argumento para el controlador de clics. Mejor aún, podría eliminarlo por getElementByIdcompleto y pasarlo thiscomo argumento.
Asad Saeeduddin
12
En Safari móvil eso no funciona. Intente llamar a this.setSelectionRange (0, 9999) en su lugar.
Dean Radcliffe
43
@DeanRadcliffe ¡Buena! Yo usaría this.setSelectionRange(0, this.value.length)en su lugar.
2grit
8
¿Alguna actualización sobre el soporte del navegador? w3schools.com/jsref/met_text_select.asp afirma que es compatible con todos los navegadores
Ayyash
65

Las soluciones publicadas anteriormente tienen dos peculiaridades:

  1. En Chrome, la selección a través de .select () no se pega; agregar un ligero tiempo de espera resuelve este problema.
  2. Es imposible colocar el cursor en el punto deseado después del enfoque.

Aquí hay una solución completa que selecciona todo el texto en foco, pero permite seleccionar un punto de cursor específico después del foco.

        $(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.
            });
        });
Casa Cory
fuente
77
Para manejar el caso en el que el usuario hace clic fuera del campo y luego regresa nuevamente, agregue.on('blur', 'input', function(){focusedElement = null;})
Tamlyn
1
un tiempo de espera de 0trabajos para mí en Chrome y Firefox. no estoy seguro de dónde 50viene su tiempo de espera .
thejoshwolfe
1
La solución es usar onClick en lugar de onFocus. Funciona perfectamente y no necesita códigos complicados.
Ismael
44
@CoryHouse no importa, porque el foco a través de la pestaña selecciona de forma nativa el texto. No se requiere javascript.
Ismael
1
@CoryHouse incluso después de 4 años, tus códigos funcionan de maravilla. Hombre, haz una reverencia. Gracias por este pequeño truco sucio. Estuve buscando durante 2-3 días hasta que encontré este. : +1:
Rutvij Kothari
47

HTML (tendrá que poner el atributo onclick en cada entrada para la que desea que funcione en la página)

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

O UNA MEJOR OPCIÓN

jQuery (esto funcionará para cada entrada de texto en la página, no es necesario cambiar su 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>
oLinkWebDevelopment
fuente
22
Probablemente sería mejor vincular al evento de enfoque en lugar de hacer clic para aquellos que tabulan a través de los elementos del formulario.
Andrew Ensley
77
@ Andrew Eso no es necesario ya que el texto siempre se selecciona si se tabula a través de los elementos de entrada. ;-)
nietonfir
los eventos de enfoque son fallidos, el evento de desenfoque, por otro lado, es útil para activar la validación y el guardado automático de formularios, ¡también funciona cuando lo tabula!
oLinkWebDevelopment
Debería funcionar bien, asegúrese de estar usando una versión actualizada de jQuery, o use $ (document) .live () en versiones anteriores.
oLinkWebDevelopment
2
A menos que el usuario ya tenga jQuery, una mejor opción no implica agregar una dependencia en una biblioteca de terceros.
Ross
37

Sé que esto es antiguo, pero la mejor opción es usar el nuevo placeholderatributo HTML si es posible:

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

Esto hará que el texto se muestre a menos que se ingrese un valor, eliminando la necesidad de seleccionar texto o borrar entradas.

Thom Porter
fuente
2
Tenga en cuenta que el marcador de posición solo está permitido con el doctype html.
dogawaf
12

Las respuestas enumeradas son parciales según yo. He vinculado a continuación dos ejemplos de cómo hacer esto en Angular y con JQuery.

Esta solución tiene las siguientes características:

  • Funciona para todos los navegadores que admiten JQuery, Safari, Chrome, IE, Firefox, etc.
  • Funciona para Phonegap / Cordova: Android e IOs.
  • Solo selecciona todo una vez después de que la entrada obtiene el foco hasta el próximo desenfoque y luego enfoca
  • Se pueden usar múltiples entradas y no falla.
  • La directiva angular tiene una gran reutilización, simplemente agregue la directiva select-all-on-click
  • JQuery se puede modificar fácilmente

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;
      });
    }
  };
}]);
D Prinsloo
fuente
Buena solución angularjs. gracias. aunque no uso el indicador hasSelectedAll. Supongo que esto es una provisión para un segundo clic, lo que podría significar que el usuario desea colocar el cursor.
rocío
11

Tratar:

onclick="this.select()"

Funciona muy bien para mí.

Slulego
fuente
11

Siempre puede usar document.execCommand( compatible con todos los principales navegadores )

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

Selecciona todo el texto en el elemento actualmente enfocado.

Toastrackenigma
fuente
Esto parece ser una solución elegante. El código completo se vería así:<input type="text" onclick="document.execCommand('selectall',null,false);" />
pipepiper
Sí, es mi forma favorita de hacer este tipo de tarea, especialmente. ya que funciona para contenteditableelementos también. Creo que también puede hacerlo aún un poco más elegante, es decir <input type="text" onfocus="document.execCommand('selectall')">, bastante seguro de que puede eliminar el nully falsesi no los usa.
Toastrackenigma
Si. onfocusParece mejor que onclick. y sí, uno puede acabar con nully false. ¡Gracias!
pipepiper
Estoy de acuerdo en que esta es la mejor solución de navegador cruzado con la advertencia de que el tiempo de espera mencionado en la solución @Corey House debe usarse para hacer que este navegador cruzado sea compatible.
Eric Lease
1
cuando se usa onfocus, se selecciona toda la página cuando se hace clic en la entrada en Chrome. onclickfunciona bien.
robotik
8

enfoque automático de entrada, con evento onfocus:

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

Esto le permite abrir un formulario con el elemento deseado seleccionado. Funciona usando el enfoque automático para presionar la entrada, que luego se envía a sí mismo un evento de enfoque, que a su vez selecciona el texto.

fyngyrz
fuente
8

Nota: Cuando considere onclick="this.select()", en el primer clic, se seleccionarán todos los caracteres, después de eso quizás desee editar algo en la entrada y haga clic entre los caracteres nuevamente, pero seleccionará todos los caracteres nuevamente. Para solucionar este problema, debe usarlo en onfocuslugar de onclick.

Amir Fo
fuente
6

De hecho, use onclick="this.select();"pero recuerde no combinarlo disabled="disabled": no funcionará en ese momento y deberá seleccionar manualmente o hacer clic múltiple para seleccionar, aún. Si desea bloquear el valor del contenido que se seleccionará, combine con el atributo readonly.

LenArt
fuente
4

Aquí hay una versión reutilizable de la respuesta de Shoban:

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

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

De esa manera, puede reutilizar el script claro para múltiples elementos.

Sean Patrick Floyd
fuente
4

Usted puede reemplazar

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

El marcador de posición se usa para reemplazar el valor como deseaba que las personas pudieran escribir en el cuadro de texto sin tener que hacer clic varias veces o usar Ctrl + a. El marcador de posición hace que no sea un valor, sino que como su nombre indica, un marcador de posición. Eso es lo que se usa en múltiples formularios en línea que dicen "Nombre de usuario aquí" o "Correo electrónico" y cuando hace clic en él, el "Correo electrónico" desaparece y puede comenzar a escribir de inmediato.

Pablo
fuente
3

La solución exacta a lo que preguntaste es:

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

Pero supongo que está tratando de mostrar "Ingrese la ID de usuario" como marcador de posición o sugerencia en la entrada. Por lo tanto, puede usar lo siguiente como una solución más eficiente:

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

Aquí hay un ejemplo en React, pero se puede traducir a jQuery en vanilla JS si lo prefiere:

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

El truco aquí es usarlo onMouseDownporque el elemento ya ha recibido el foco cuando activeElementse activa el evento "clic" (y, por lo tanto, la comprobación fallará).

La activeElementverificación es necesaria para que el usuario pueda colocar el cursor donde lo desee sin tener que volver a seleccionar constantemente la entrada completa.

El tiempo de espera es necesario porque, de lo contrario, el texto se seleccionará y luego no se seleccionará instantáneamente, ya que supongo que el navegador realiza la verificación de posicionamiento del cursor.

Y, por último, el = ev.currentTargetes necesario en React porque React reutiliza los objetos de evento y perderá el evento sintético cuando se active setTimeout.

mpen
fuente
¿Reacciona el nuevo jQuery?
vpzomtrrfrt 01 de
@vpzomtrrfrt Seguro es: DJ / K. Había escrito esto en React y no estaba dispuesto a dejar de reaccionar solo por algunos puntos SO. Tómelo o déjelo :-)
mpen 01 de
¿Cómo es este un ejemplo en React? Este es más un ejemplo en JavaScript nativo.
Cesar
2

El problema con la captura del evento de clic es que cada clic posterior dentro del texto lo seleccionará nuevamente, mientras que el usuario probablemente esperaba reposicionar el cursor.

Lo que funcionó para mí fue declarar una variable, selectSearchTextOnClick y establecerla en true de forma predeterminada. El controlador de clic comprueba que la variable sigue siendo verdadera: si es así, la establece en falsa y realiza la selección (). Luego tengo un controlador de eventos de desenfoque que lo restablece a verdadero.

Los resultados hasta ahora parecen ser el comportamiento que esperaba.

(Editar: Olvidé decir que había intentado atrapar el evento de enfoque como alguien sugirió, pero eso no funciona: después de que se active el evento de enfoque, el evento de clic puede activarse, deseleccionando inmediatamente el texto).

Luxocrates
fuente
2

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

y código javascript sin enlace

function textSelector(ele){
    $(ele).select();
}
Hussainsheriff
fuente
44
"javascript:" solo se usa en href y debe evitarse.
user1133275
1

Bueno, esta es una actividad normal para un TextBox.

Haga clic en 1 - Establecer foco

Haga clic en 2/3 (doble clic) - Seleccionar texto

Puede establecer el foco en TextBox cuando la página se carga por primera vez para reducir la "selección" a un solo evento de doble clic.

RPM1984
fuente
1
También 2 clics son para la selección de palabras y 3 para la selección de líneas.
Arthur
1

Use "marcador de posición" en lugar de "valor" en su campo de entrada.

seaJay
fuente
0

Si está utilizando AngularJS, puede usar una directiva personalizada para facilitar el acceso:

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

Ahora uno puede usarlo así:

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

La muestra es con requirejs, por lo que la primera y la última línea se pueden omitir si se usa otra cosa.

timtos
fuente
0

Si alguien quiere hacer esto en la página de carga con jQuery (ideal para campos de búsqueda) aquí está mi solución

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

Basado en esta publicación. Gracias a CSS-Tricks.com

Hugo Dias
fuente
0

Si solo está tratando de tener un texto de marcador de posición que se reemplaza cuando un usuario selecciona el elemento, entonces obviamente es la mejor práctica usar el placeholderatributo hoy en día. Sin embargo, si desea seleccionar todo el valor actual cuando un campo gana foco, entonces una combinación de respuestas @Cory House y @Toastrackenigma parece ser la más canónica. Uso focusyfocusout eventos, con controladores que configuran / liberan el elemento de enfoque actual, y seleccionan todos cuando están enfocados. Un ejemplo angular2 / typecript es el siguiente (pero sería trivial convertir a vanilla js):

Modelo:

<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); });
};
Eric Lease
fuente