html - none - webkit autofill transparent

problema con el manejo de formularios de Chrome: input onfocus=“this.select()”

Question

Estoy utilizando el siguiente código HTML para seleccionar automáticamente texto en un campo de formulario cuando un usuario hace clic en el campo:

<input onfocus="this.select()" type="text" value="Search">

Esto funciona bien en Firefox e Internet Explorer (el propósito es utilizar el texto predeterminado para describir el campo al usuario, pero resaltarlo para que al hacer clic solo puedan comenzar a escribir), pero tengo problemas para que funcione. Cromo. Cuando hago clic en el campo de formulario en Chrome, el texto se resalta por solo una fracción de segundo y luego el cursor salta al final del texto predeterminado y el resaltado desaparece.

¿Alguna idea sobre cómo hacer que esto funcione en Chrome también?

Answer 1

En lugar de vincularse al evento onfocus, debe vincular esta acción al evento onclick y funcionará como usted desea.

<input onclick="this.select()" id="txt1" name="txt1" type="text" value="Search">

Answer 2

Esta es una solución que funciona en Firefox, Chrome e IE, tanto con el foco del teclado como con el mouse. También maneja correctamente los clics después del enfoque (mueve el cursor y no vuelve a seleccionar el texto):

<input
onmousedown="this.clicked = 1;"
onfocus="if (!this.clicked) this.select(); else this.clicked = 2;"
onclick="if (this.clicked == 2) this.select(); this.clicked = 0;"
>

Con el enfoque del teclado, solo se activa el onfocus que selecciona el texto porque este this.clicked no está establecido. Con el enfoque del mouse, los disparos onmousedown , luego onfocus y luego onclick seleccionan el texto en onclick pero no en onfocus (Chrome lo requiere).

Los clics del mouse cuando el campo ya está enfocado no activan el onfocus que resulta en no seleccionar nada.

Answer 3

Esta pregunta se publicó hace cinco años, pero con HTML5, puede hacer esta función con el atributo de marcador de posición.

<input type="text" name="fname" placeholder="First name">

Answer 4

Esto funciona mejor para mí ...

<input type="text" onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />

El evento mouseup se dispara después de onfocus.

Answer 5

La forma de setTimeout() esto fue mediante la creación de una función de envoltorio que usa setTimeout() para retrasar la llamada real a select() . Entonces acabo de llamar a esa función en el evento de enfoque del cuadro de texto. El uso de setTimeout difiere la ejecución hasta que la pila de llamadas vuelva a estar vacía, lo cual sería cuando el navegador haya terminado de procesar todos los eventos que sucedieron cuando hizo clic (ratón, ratón, clic, enfoque, etc.). Es un poco de un truco, pero funciona.

function selectTextboxContent(textbox)
{
setTimeout(function() { textbox.select(); }, 10);
}

Entonces puedes hacer algo como esto para hacer la selección en foco:

<input onfocus="selectTextboxContent(this);" type="text" value="Search">

Answer 6

Si realmente insiste en seguir con onfocus, también deberá agregar onmouseup="return false" también.

Answer 7

Simplemente use <input onmouseup=select()> . Eso funciona en todos los navegadores.

Answer 8

Sobre la base de la respuesta de Jason, aquí hay una función que reemplaza la función "seleccionar" de los nodos de entrada DOM con una versión actualizada que tiene el tiempo de espera incorporado:

if (/chrome/i.test(navigator.userAgent)) {
HTMLInputElement.prototype.brokenSelectFunction =
HTMLInputElement.prototype.select;
HTMLInputElement.prototype.select = function() {
setTimeout(function(closureThis) { return function() {
closureThis.brokenSelectFunction();
}; }(this), 10);
};
}

Básicamente, (solo en Chrome) simplemente cambiamos el nombre de la función de selección () integrada a brokenSelectFunction () y luego agregamos una nueva función a todas las entradas llamadas select () que llama a brokenSelectFunction () después de un retraso. Ahora, simplemente llame a select () normalmente, ya que la función de selección incorporada ha sido reemplazada por la función fija con la sugerencia de retraso de Jason.

De esta manera, no tiene que preocuparse por cambiar sus llamadas existentes para usar una función de envoltura (y una vez que esto se resuelve en Chrome, puede quitar la calza anterior y volver a la normalidad).

textbox.select(); // now runs select with setTimeout built-in (in Chrome only)

Editar : es posible que desee cambiar la coincidencia de usuario-agente de "chrome" a "webkit", ya que este problema ocurre en todos los navegadores webkit, incluido Safari, y esta solución funcionará para cualquiera de ellos.

Answer 9

onfocus="setTimeout(function(){select(this)})"

o onfocus="setTimeout(function(){select(this)},118)" para Firefox.