javascript - span - Seleccionando todo el texto en el ingreso de texto HTML al hacer clic

parrafos en html ejemplos

Question

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 se muestra la página, el texto contiene el mensaje Por favor ingrese el ID de usuario . Sin embargo, encontré que el usuario necesita hacer clic 3 veces para seleccionar todo el texto (en este caso es Por favor ingrese la identificación del usuario ).

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

Editar:

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

Answer 1

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 usar onMouseDown porque el elemento ya ha recibido un foco en el momento en que se activeElement el evento "clic" (y, por lo tanto, la comprobación activeElement fallará).

La comprobación activeElement es necesaria para que el usuario pueda colocar el cursor donde desee sin tener que volver a seleccionar toda la entrada.

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

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

Answer 2

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.

Answer 3

Bueno, esta es una actividad normal para un TextBox.

Haga clic en 1 - Establecer enfoque

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Los resultados hasta ahora parecen ser el comportamiento que yo esperaría.

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

Answer 7

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

Answer 8

Html (tendrás que poner el atributo onclick en cada entrada para la que quieras que funcione en la página)

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

O UNA MEJOR OPCION

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>

Answer 9

La solución exacta a lo que pediste 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á intentando mostrar "Introduzca la ID de usuario" como marcador de posición o sugerencia en la entrada. Entonces, puedes usar lo siguiente como una solución más eficiente:

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

Answer 10

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.
• Trabajos para Phonegap / Cordova: Android e IOs.
• Solo selecciona todo una vez después de que la entrada se enfoca hasta la siguiente imagen borrosa y luego enfoca
• Se pueden usar múltiples entradas y no se puede saldar.
• La directiva angular tiene una gran reutilización, simplemente agregue la directiva seleccionar-todo-en-clic
• 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;
});
}
};
}]);

Answer 11

Las soluciones publicadas anteriormente tienen dos peculiaridades:

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

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

 $(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 12

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 la forma en que 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 lo hace así que no es un valor, pero como su nombre sugiere un marcador de posición. Eso es lo que se usa en varios formularios en línea que dice "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.

Answer 13

Puedes usar este fragmento de JavaScript:

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

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

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

Answer 14

Sé que esto es antiguo, pero la mejor opción es usar el nuevo atributo HTML de placeholder 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.

Answer 15

Si alguien quiere hacer esto en la carga de la página con jQuery (dulce para los 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 this post. Gracias a CSS-Tricks.com

Answer 16

Si está utilizando AngularJS, puede usar una directiva personalizada para un fácil 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.

Answer 17

Si solo intenta que el texto del marcador de posición se reemplace cuando un usuario selecciona el elemento, es obvio que es una práctica recomendada utilizar el atributo de placeholder actualidad. Sin embargo, si desea seleccionar todo el valor actual cuando un campo se enfoca, una combinación de respuestas de @Cory House y @Toastrackenigma parece ser la más canónica. Use los eventos de focus y focusout , con controladores que configuran / liberan el elemento de enfoque actual, y seleccionan todos cuando están enfocados. Un ejemplo de angular2 / typescript es el siguiente (pero sería trivial convertirlo 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); });
};

Answer 18

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

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

Selecciona todo el texto en el elemento enfocado actualmente.

Answer 19

Tratar:

onclick="this.select()"

Funciona muy bien para mí.

Answer 20

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

Answer 21

autofocus 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 utilizando el enfoque automático para golpear la entrada, que luego se envía un evento onfocus, que a su vez selecciona el texto.

Answer 22

Nota: Cuando considere onclick="this.select()" , en el primer clic, se seleccionarán Todos los caracteres. Después de eso, tal vez quiso editar algo en la entrada y hacer clic entre los caracteres, luego seleccionará todos los caracteres nuevamente. Para solucionar este problema, debe utilizar onfocus lugar de onclick .