type - entrada jQuery seleccionar todo en foco

jquery selector

Question

Estoy usando este código para intentar 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 escritura se deja donde hice clic ...

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

Quiero que todo quede seleccionado.

Answer 1

Al usar FF 16.0.2 y jquery 1.8.3, no funcionó todo el código de la respuesta.
Yo uso código como este y trabajo.

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

Answer 2

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

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

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

Answer 3

Creo que lo que pasa es esto:

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

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

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

Answer 4

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

Demo en jsFiddle

El problema:

Aquí hay un poco de explicación:

Primero, echemos un vistazo al orden de los eventos cuando hace clic con el mouse o la pestaña en un campo.
Podemos registrar todos los eventos relevantes como este:

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

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

Algunos navegadores intentan colocar 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 arrastrar para resaltar un texto. No se puede hacer una designación sobre la posición del cursor 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 posicionamiento.

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

La solución:

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

Nota : la combinación de teclas de un evento de pestaña realmente se activará en el nuevo campo de entrada, no en el anterior.

Solo queremos disparar 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 lugar de ello, tan pronto como se presione mouseup o keyup, llamaremos a nuestra función. Lo primero que haremos, es eliminar los controladores para ambos. De esa manera, no importará si estamos o no en una pestaña. La función debe ejecutarse exactamente una vez.

Nota : la mayoría de los navegadores, naturalmente, seleccionan todo el texto durante un evento de tabulación, pero como lo mouseup animatedgif , todavía queremos manejar el evento keyup , de lo contrario, el evento mouseup seguirá existiendo en cualquier momento que tengamos pestañas. puede apagar los oyentes tan pronto como hayamos procesado la selección.

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

Finalmente, para una protección adicional, podemos agregar espacios de nombres de eventos a las funciones 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 número 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 de esta manera:

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

Demo en violín

Answer 5

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 descartas 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 foco actualmente. Funciona para estos casos:

• haciendo clic cuando el campo no está enfocado
• haciendo clic cuando el campo tiene enfoque
• tabulación en el campo

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

Answer 6

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

Answer 7

Esta versión funciona en ios y también corrige el arrastre para seleccionar 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/

Answer 8

Esto haría el trabajo y evitaría el problema de que ya no se 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");
    }
});

Answer 9

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

Answer 10

Funciona muy bien con el JavaScript nativo select() .

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

o en general:

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

Answer 11

Hay algunas respuestas decentes aquí y la de @ user2072367 es mi favorita, pero tiene un resultado inesperado cuando te enfocas a través de la pestaña en lugar de hacerlo con un clic. (resultado inesperado: para seleccionar el texto normalmente después del enfoque a través de la pestaña, debe hacer clic una vez más)

Este violín corrige ese pequeño error y además almacena $ (esto) en una variable para evitar la selección redundante de DOM. ¡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();
});

Answer 12

O simplemente puede usar <input onclick="select()"> Funciona perfecto.

Answer 13

Puedes usar código simple:

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

Answer 14

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

jQuery <versión 1.7:

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

jQuery version 1.7+:

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

Aquí hay una demo.

Answer 15

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Answer 16

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

Use clearTimeout para mayor seguridad si cambia rápidamente entre dos entradas ... clearTimeout limpie el tiempo de espera anterior ...