Selecione todo o conteúdo da caixa de texto quando receber o foco (Vanilla JS ou jQuery)

O que é uma solução Vanilla JS ou jQuery que seleciona todo o conteúdo de uma caixa de texto quando ela recebe o foco?

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

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

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

O jQuery não é JavaScript, o que é mais fácil de usar em alguns casos.

Veja este exemplo:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Fonte: Truques CSS , MDN

Este não é apenas um problema do Chrome / Safari, experimentei um comportamento bastante semelhante ao Firefox 18.0.1. O engraçado é que isso não acontece no MSIE! O problema aqui é o primeiro evento de mouseup que força a seleção da seleção do conteúdo de entrada, portanto, ignore a primeira ocorrência.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

A abordagem timeOut causa um comportamento estranho e, ao bloquear todos os eventos de mouseup, você não pode remover a seleção clicando novamente no elemento de entrada.

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Usando JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Usando JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Usando o React JS:

No respectivo componente dentro da função de renderização -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

minha solução é usar um tempo limite. Parece funcionar ok

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Isso também funcionará no iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Eu sei que o código embutido não é muito estiloso, mas não queria colocar isso em um arquivo .js. Funciona sem jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

As respostas aqui me ajudaram até certo ponto, mas tive um problema nos campos de entrada do número HTML5 ao clicar nos botões para cima / para baixo no Chrome.

Se você clicar em um dos botões e deixar o mouse sobre o botão, o número continuará sendo alterado, como se você estivesse segurando o botão do mouse porque o mouse estava sendo jogado fora.

Resolvi isso removendo o manipulador de mouseup assim que foi acionado, como abaixo:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Espero que isso ajude as pessoas no futuro ...

Isso vai funcionar, tente isso -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Funciona no Safari / IE 9 e Chrome, mas não tive a chance de testar no Firefox.

Eu sei que já existem muitas respostas aqui - mas esta falta até agora; uma solução que também funciona com conteúdo gerado pelo ajax:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

Consegui melhorar um pouco a resposta de Zach incorporando algumas chamadas de função. O problema com essa resposta é que ela desativa o onMouseUp completamente, impedindo que você clique na caixa de texto quando o foco estiver em foco.

Aqui está o meu código:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Esta é uma pequena melhoria em relação à resposta de Zach. Funciona perfeitamente no IE, não funciona no Chrome e funciona com sucesso alternado no FireFox (literalmente, outras vezes). Se alguém tiver uma idéia de como fazê-lo funcionar de maneira confiável no FF ou no Chrome, compartilhe.

Enfim, achei que compartilharia o que pudesse para tornar isso um pouco melhor.

Como @Travis e @Mari, eu queria selecionar automaticamente quando o usuário clicava, o que significa impedir o comportamento padrão de um mouseupevento, mas não impedir que o usuário clique ao redor. A solução que eu encontrei, que funciona no IE11, Chrome 45, Opera 32 e Firefox 29 (esses são os navegadores que eu instalei atualmente), é baseada na sequência de eventos envolvidos em um clique do mouse.

Quando você clica em uma entrada de texto que não tem foco, você obtém estes eventos (entre outros):

• mousedown: Em resposta ao seu clique. O tratamento padrão aumenta, focusse necessário, e define o início da seleção.
• focus: Como parte do tratamento padrão de mousedown.
• mouseup: A conclusão do seu clique, cujo tratamento padrão definirá o final da seleção.

Quando você clica em uma entrada de texto que já possui foco, o focusevento é ignorado. Como o @Travis e o @Mari notaram astutamente, o tratamento padrão das mouseupnecessidades só deve ser evitado se o focusevento ocorrer. No entanto, como não há focusevento "não aconteceu", precisamos inferir isso, o que podemos fazer no mousedownmanipulador.

A solução da @ Mari exige que o jQuery seja importado, o que eu quero evitar. A solução da @ Travis faz isso inspecionando document.activeElement. Não sei por que exatamente a solução dele não funciona nos navegadores, mas há outra maneira de rastrear se a entrada de texto tem foco: basta seguir seus eventos focuse blur.

Aqui está o código que funciona para mim:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Espero que isso ajude alguém. :-)

onclick="this.focus();this.select()"

O que é uma solução JavaScript ou jQuery que seleciona todo o conteúdo de uma caixa de texto quando ela recebe o foco ?

Você só precisa adicionar o seguinte atributo:

onfocus="this.select()"

Por exemplo:

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

(Honestamente, eu não tenho idéia do por que você precisaria de mais alguma coisa.)

Isso funcionou para mim (postando uma vez que não está em respostas, mas em um comentário)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Edit: Por solicitação do @ DavidG, não posso fornecer detalhes porque não sei por que isso funciona, mas acredito que tenha algo a ver com o evento de foco propagado para cima ou para baixo ou o que quer que ele faça e o elemento de entrada recebendo a notificação recebeu foco. Definir o tempo limite dá ao elemento um momento para perceber que ele foi feito.

Se você encadear os eventos, acredito que elimina a necessidade de usar .onecomo sugerido em outras partes deste segmento.

Exemplo:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

Nota: Se você estiver programando no ASP.NET, poderá executar o script usando ScriptManager.RegisterStartupScript em C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Ou apenas digite o script na página HTML sugerida nas outras respostas.

Semeio este aqui em algum lugar, funciona perfeitamente!

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

Estou meio atrasado para a festa, mas isso funciona perfeitamente no IE11, Chrome, Firefox, sem bagunçar o mouse (e sem o JQuery).

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

Minha solução é a próxima:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Portanto, o mouse funcionará normalmente, mas não será desmarcado após o foco ser inserido