entrada jquery selecionar tudo em foco

Estou usando esse código para tentar selecionar todo o texto no campo quando um usuário se concentra no campo. O que acontece é que ele seleciona tudo por um segundo, depois é desmarcado e o cursor de digitação é deixado onde eu cliquei ...

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

Quero que tudo permaneça selecionado.

Tente usar em clickvez de focus. Parece funcionar para eventos importantes e do mouse (pelo menos no Chrome / Mac):

jQuery <versão 1.7:

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

jQuery versão 1.7+:

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

Aqui está uma demonstração

Eu acho que o que acontece é o seguinte:

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

Uma solução alternativa pode estar chamando o select () de forma assíncrona, para que seja executado completamente após o focus ():

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

Eu acho que essa é a melhor solução. Ao contrário de simplesmente selecionar no evento onclick, ele não impede a seleção / edição de texto com o mouse. Ele funciona com os principais mecanismos de renderização, incluindo o IE8.

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

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

Há algumas respostas decentes aqui e @ user2072367 é a minha favorita, mas ele tem um resultado inesperado quando você se concentra na guia e não no clique. (resultado inesperado: para selecionar texto normalmente após o foco na guia, você deve clicar uma vez mais)

Esse violão corrige esse pequeno erro e armazena adicionalmente $ (this) em uma variável para evitar a seleção redundante do DOM. Confira! (:

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

Após uma análise cuidadosa, proponho isso como uma solução muito mais limpa dentro deste segmento:

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

Demonstração em jsFiddle

O problema:

Aqui está um pouco de explicação:

Primeiro, vamos dar uma olhada na ordem dos eventos quando você passa o mouse ou guia em um campo.
Podemos registrar todos os eventos relevantes como este:

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

Nota : Alterei esta solução para usar, em clickvez de mouseupacontecer mais tarde no pipeline de eventos, e parecia estar causando alguns problemas no firefox, conforme o comentário de @ Jocie

Alguns navegadores tentam posicionar o cursor durante os eventos mouseupou click. Isso faz sentido, pois você pode querer iniciar o cursor em uma posição e arrastar para destacar algum texto. Não pode fazer uma designação sobre a posição do cursor até que você realmente tenha levantado o mouse. Portanto, as funções que lidam com o focusdestino estão fadadas a responder muito cedo, deixando o navegador substituir o seu posicionamento.

Mas o problema é que realmente queremos lidar com o evento de foco. Ele nos informa a primeira vez que alguém entra no campo. Após esse ponto, não queremos continuar substituindo o comportamento de seleção do usuário.

A solução:

Em vez disso, dentro do focusmanipulador de eventos, podemos anexar rapidamente ouvintes para os eventos click(clique) e keyup(tab in) que estão prestes a disparar.

Nota : O keyup de um evento da guia será acionado no novo campo de entrada, não no campo anterior

Queremos apenas disparar o evento uma vez. Poderíamos usar .one("click keyup), mas isso chamaria o manipulador de eventos uma vez para cada tipo de evento . Em vez disso, assim que pressionar o mouse ou a tecla, chamaremos nossa função. A primeira coisa que faremos é remover os manipuladores de ambos. Dessa forma, não importa se inserimos ou inserimos o mouse. A função deve ser executada exatamente uma vez.

Nota : a maioria dos navegadores seleciona naturalmente todo o texto durante um evento de guia, mas, como o gif animado apontou , ainda queremos lidar com o keyupevento, caso contrário, o mouseupevento ainda permanecerá a qualquer momento em que for inserido o guia . Ouvimos os dois para que possamos ativar desligue os ouvintes assim que processarmos a seleção.

Agora, podemos ligar select()depois que o navegador fizer sua seleção, para substituir o comportamento padrão.

Finalmente, para proteção extra, podemos adicionar espaços de nomes de eventos às funções mouseupe keyuppara que o .off()método não remova outros ouvintes que possam estar em jogo.

Testado no IE 10+, FF 28+ e Chrome 35+

Como alternativa, se você deseja estender o jQuery com uma função chamada onceque será acionada exatamente uma vez para qualquer 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);
    });
};

Em seguida, você pode simplificar ainda mais o código assim:

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

Demonstração em violino

Isso faria o trabalho e evitaria o problema de que você não pode mais selecionar parte do texto com o 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");
    }
});

Esta versão funciona no ios e também corrige o arrastar-para-selecionar padrão no 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/

O problema com a maioria dessas soluções é que elas não funcionam corretamente ao alterar a posição do cursor no campo de entrada.

O onmouseupevento altera a posição do cursor no campo, que é acionado depois onfocus(pelo menos no Chrome e FF). Se você descartar incondicionalmente omouseup , o usuário não poderá alterar a posição do cursor com o 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"));

O código impedirá condicionalmente o mouseup comportamento padrão se o campo não tiver foco no momento. Funciona para estes casos:

• clicando quando o campo não está focado
• clicando quando o campo tem foco
• tabulação no campo

Eu testei isso no Chrome 31, FF 26 e IE 11.

Encontrei uma solução incrível lendo este tópico

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

Eu venho do final de 2016 e esse código funciona nas versões recentes do jquery (jquery-2.1.3.js nesse caso).

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

Eu usando o FF 16.0.2 e jquery 1.8.3, todo o código na resposta não funcionou.
Eu uso código como este e trabalho.

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

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

Use clearTimeout para obter mais segurança se você alternar rapidamente entre duas entradas. ClearTimeout limpa o tempo limite antigo ...

Funciona muito bem com o JavaScript nativo select().

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

ou em geral:

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

Ou você pode simplesmente usar o <input onclick="select()">Works perfect.

Você pode usar um código simples:

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

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

Eu sempre uso requestAnimationFrame()para pular mecanismos internos pós-evento e isso funciona perfeitamente no Firefox. Não testou no Chrome.

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