jquery input seleccionar todo en el foco

Estoy usando este código para tratar de seleccionar todo el texto en el campo cuando un usuario se enfoca en el campo. Lo que sucede es que selecciona todo por un segundo, luego se deselecciona y el cursor de mecanografía se deja donde hice clic …

$("input[type=text]").focus(function() { $(this).select(); }); 

Quiero que todo permanezca seleccionado.

Intenta usar click lugar de focus . Parece funcionar tanto para mouse como para eventos clave (al menos en Chrome / Mac):

jQuery

 $("input[type='text']").click(function () { $(this).select(); }); 

jQuery versión 1.7+:

 $("input[type='text']").on("click", function () { $(this).select(); }); 

Aquí hay una demostración

Creo que lo que sucede es esto:

 focus() UI tasks related to pre-focus callbacks select() UI tasks related to focus (which unselect again) 

Una solución puede llamar a select () de forma asíncrona, de modo que se ejecute completamente después de focus ():

 $("input[type=text]").focus(function() { var save_this = $(this); window.setTimeout (function(){ save_this.select(); },100); }); 

Creo que esta es una mejor solución. A diferencia de simplemente seleccionar en el evento onclick, no evita seleccionar / editar texto con el mouse. Funciona con los principales motores de renderizado, incluido IE8.

 $('input').on('focus', function (e) { $(this) .one('mouseup', function () { $(this).select(); return false; }) .select(); }); 

http://jsfiddle.net/25Mab/9/

Aquí hay algunas respuestas decentes y @ user2072367 es mi favorito, pero tiene un resultado inesperado cuando se enfoca a través de una pestaña en lugar de a través de un clic. (resultado inesperado: para seleccionar texto normalmente después del enfoque a través de la pestaña, debe hacer clic en un tiempo adicional)

Este violín corrige ese pequeño error y adicionalmente almacena $ (this) en una variable para evitar la selección DOM redundante. ¡Echale un vistazo! (:

Probado en IE> 8

 $('input').on('focus', function() { var $this = $(this) .one('mouseup.mouseupSelect', function() { $this.select(); return false; }) .one('mousedown', function() { // compensate for untriggered 'mouseup' caused by focus via tab $this.off('mouseup.mouseupSelect'); }) .select(); }); 

Después de una revisión cuidadosa, propongo esto como una solución mucho más limpia dentro de este hilo:

 $("input").focus(function(){ $(this).on("click.a keyup.a", function(e){ $(this).off("click.a keyup.a").select(); }); }); 

Demostración en jsFiddle

El problema:

Aquí hay un poco de explicación:

Primero, echemos un vistazo al orden de los eventos cuando mueve el mouse o tabula en un campo.
Podemos registrar todos los eventos relevantes de esta manera:

 $("input").on("mousedown focus mouseup click blur keydown keypress keyup change", function(e) { console.log(e.type); }); 

eventos de enfoque

Nota : He cambiado esta solución para usar click lugar de mouseup como ocurre más adelante en la canalización del evento y parecía estar causando algunos problemas en Firefox según el comentario de @Jocie.

Algunos navegadores intentan posicionar el cursor durante el mouseup o click eventos. Esto tiene sentido ya que es posible que desee iniciar el cursor en una posición y arrastrarlo para resaltar texto. No puede hacer una designación sobre la posición de intercalación hasta que haya levantado el mouse. Por lo tanto, las funciones que manejan el focus están predestinadas a responder demasiado pronto, dejando que el navegador anule su posición.

Pero el problema es que realmente queremos manejar el evento de enfoque. Nos permite saber la primera vez que alguien ingresó al campo. Después de ese punto, no queremos continuar anulando el comportamiento de selección del usuario.

La solución:

En cambio, dentro del controlador de eventos de focus , podemos adjuntar oyentes rápidamente para los eventos de click (clic en) y de keyup (pestaña en) que están a punto de dispararse.

Nota : El teclado de un evento de tabulación realmente disparará en el nuevo campo de entrada, no en el anterior

Solo queremos lanzar el evento una vez. Podríamos usar .one("click keyup) , pero esto llamaría al controlador de eventos una vez para cada tipo de evento . En cambio, tan pronto como se presiona mouseup o keyup llamaremos a nuestra función. Lo primero que haremos, es eliminar los controladores para ambos. De esta forma no importará si tabulamos o desplazamos. La función debería ejecutarse exactamente una vez.

Nota : la mayoría de los navegadores seleccionan de forma natural todo el texto durante un evento tab, pero como animatedgif señaló , todavía queremos manejar el evento keyup , de lo contrario, el evento mouseup aún permanecerá en blanco en cualquier momento que hayamos tabulado. Escuchamos ambos para que podamos puede desactivar a los oyentes tan pronto como procesemos la selección.

Ahora, podemos llamar a select() después de que el navegador haya hecho su selección, así que estamos seguros de anular el comportamiento predeterminado.

Finalmente, para una protección adicional, podemos agregar espacios de nombres de eventos a las funciones de mouseup y keyup para que el método .off() no elimine ningún otro oyente que pueda estar en juego.


Probado en IE 10+, FF 28+ y Chrome 35+


Alternativamente, si desea extender jQuery con una función llamada once que se activará exactamente una vez para cualquier cantidad de eventos :

 $.fn.once = function (events, callback) { return this.each(function () { var myCallback = function (e) { callback.call(this, e); $(this).off(events, myCallback); }; $(this).on(events, myCallback); }); }; 

Entonces puedes simplificar el código más de esta manera:

 $("input").focus(function(){ $(this).once("click keyup", function(e){ $(this).select(); }); }); 

Demostración en violín

Esto haría el trabajo y evitaría el problema de que ya no puede seleccionar parte del texto con el mouse.

 $("input[type=text]").click(function() { if(!$(this).hasClass("selected")) { $(this).select(); $(this).addClass("selected"); } }); $("input[type=text]").blur(function() { if($(this).hasClass("selected")) { $(this).removeClass("selected"); } }); 

El problema con la mayoría de estas soluciones es que no funcionan correctamente al cambiar la posición del cursor dentro del campo de entrada.

El evento onmouseup cambia la posición del cursor dentro del campo, que se onfocus después de onfocus (al menos dentro de Chrome y FF). Si descarta incondicionalmente el mouseup , el usuario no puede cambiar la posición del cursor con el mouse.

 function selectOnFocus(input) { input.each(function (index, elem) { var jelem = $(elem); var ignoreNextMouseUp = false; jelem.mousedown(function () { if (document.activeElement !== elem) { ignoreNextMouseUp = true; } }); jelem.mouseup(function (ev) { if (ignoreNextMouseUp) { ev.preventDefault(); ignoreNextMouseUp = false; } }); jelem.focus(function () { jelem.select(); }); }); } selectOnFocus($("#myInputElement")); 

El código evitará condicionalmente el comportamiento predeterminado del mouseup si el campo no tiene actualmente el foco. Funciona para estos casos:

  • haciendo clic cuando el campo no está enfocado
  • haciendo clic cuando el campo tiene foco
  • tabbing en el campo

He probado esto en Chrome 31, FF 26 e IE 11.

Esta versión funciona en ios y también corrige drag-to-select estándar en Windows Chrome

 var srcEvent = null; $("input[type=text],input[type=number]") .mousedown(function (event) { srcEvent = event; }) .mouseup(function (event) { var delta = Math.abs(event.clientX - srcEvent.clientX) + Math.abs(event.clientY - srcEvent.clientY); var threshold = 2; if (delta < = threshold) { try { // ios likes this but windows-chrome does not on number fields $(this)[0].selectionStart = 0; $(this)[0].selectionEnd = 1000; } catch (e) { // windows-chrome likes this $(this).select(); } } }); 

http://jsfiddle.net/Zx2sc/2/

Encontré una solución increíble leyendo este hilo

 $(function(){ jQuery.selectText('input:text'); jQuery.selectText('input:password'); }); jQuery.extend( { selectText: function(s) { $(s).live('focus',function() { var self = $(this); setTimeout(function() {self.select();}, 0); }); } }); 

Vengo de finales de 2016 y este código solo funciona en versiones recientes de jquery (jquery-2.1.3.js en este caso).

 if ($(element).is("input")) { $(element).focus(function () { $(element).select(); }); } 

Usando FF 16.0.2 y jquery 1.8.3, todo el código en la respuesta no funcionó.
Uso código como este y trabajo.

 $("input[type=text]").focus().select(); 

O simplemente puede usar Funciona perfecto.

 var timeOutSelect; $("input[type=text]").focus(function() { var save_this = $(this); clearTimeout(timeOutSelect); timeOutSelect = window.setTimeout (function(){ save_this.select(); }, 100); }); 

Use clearTimeout para obtener más seguridad si cambia rápidamente entre dos entradas … clearTimeout limpia el tiempo de espera anterior …

  

Puedes usar un código simple:

 $('#idname').select();