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

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"

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

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

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>

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.

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

Tratar:

onclick="this.select()"

Funciona muy bien para mí.

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.

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.

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.

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.

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.

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.

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

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.

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

Esta pregunta tiene opciones para cuando .select () no funciona en plataformas móviles: selección de texto mediante programación en un campo de entrada en dispositivos iOS (Safari móvil)

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

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.

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

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.

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

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