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

311

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?

Jon Erickson
fonte
3
@gdoron, por algum motivo, que o link redireciona para esta pergunta em si.
Destritor
@Destrictor, sim, que deveria ter sido esta: "Selecionando texto em foco usando jQuery não funciona no Safari e Chrome"
gdoron está apoiando Monica
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. Dê uma olhada na minha resposta aqui: stackoverflow.com/a/20826207/641452
Colin Breame

Respostas:

370
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
John Sheehan
fonte
23
Também apenas para informações adicionais: "input [type = text]" agora pode ser "entrada: texto" diz respeito
Ricardo Vega
8
Isso não parece funcionar para mim no Chrome e o site jQuery diz que depende do navegador. Alguém mais pode verificar?
Kenny Wyland
71
Parece que os navegadores WebKit interferem nisso devido ao evento mouseup. Eu adicionei isso e funcionou: $ ('input: text'). Mouseup (function (e) {return false;});
Kenny Wyland
5
Kenny está correto, mas, infelizmente, 'mouseup' também afeta os controles giratórios do Chrome. Acionar o 'clique' em vez de o 'foco' parece resolver isso
Richard Kennard
24
Eu uso assim: $ ("input: text"). Select (). Focus ();
precisa
227

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

Zach
fonte
43
+ onmouseup = "return false" para parar de desmarcar ao clicar
Anthony Johnston
2
+1 para algum tipo de stopEvent para mouseup, ou isso não funciona de maneira confiável. A desvantagem de fazer isso é que, quando o cursor estiver no campo, clicar em algum lugar dentro do texto selecionado para posicionar o cursor não funcionará; os cliques são efetivamente desativados. Ainda assim, para situações em que a seleção de todo o texto em foco é desejável, é provavelmente o menor dos dois males.
enigment
Consegui solucionar o problema levantado pelo enigment, definindo uma variável global doMouseUp como false, durante o evento onMouseDown, se este! = Document.activeElement. Em seguida, durante onMouseUp, redefina doMouseUp como true e retorne o valor doMouseUp antes de redefini-lo. Isso está ficando complicado e precisa de código - postarei uma resposta explicando melhor.
Travis
1
NÃO adicione onmouseup="return false;"se você deseja que o usuário possa selecionar e editar livremente o texto depois de focar dentro da caixa de texto. Com esse código, o texto será bloqueado em uma situação "selecionar tudo" e o usuário não poderá editá-lo, a menos que o usuário digite um novo texto ou use as teclas de seta para se mover. Honestamente, isso parece um comportamento muito estranho e não faria sentido, a menos que a caixa de texto se destine a ser permanentemente não editável (e, portanto, desativada).
ADTC
1
Tecnicamente, você não precisa onmouseup="return false;"se simplesmente deseja que a seleção ocorra quando o usuário clica ou guia pela primeira vez . E +1 para o javascript de baunilha!
Clone45
42
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
Tomas Kirda
fonte
3
Confirmado. A resposta mais votada / aceita atualmente mais alta parece não funcionar no Chrome.
Aron Boyette
39
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
Yogesh Agrawal
fonte
1
Isso é bom. Obrigado! O comentário por enigment à resposta de Zach fornece uma desvantagem de impedir a inadimplência do mouseupevento: "quando o cursor estiver no campo, clicar em algum lugar dentro do texto selecionado para posicionar o cursor não funcionará; os cliques serão efetivamente desativados. situações em que a seleção de todo o texto em foco é desejável, é provavelmente o menor dos dois males ".
JohnK
25

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

aaa
fonte
7
Talvez esteja tudo bem se você não se importa de misturar sua marcação e código; a maioria das pessoas tenta manter seu script 'discreto' hoje em dia. Ah ... e jQuery é Javascript.
Andrew Barber
2
Obrigado pela sugestão de onclick, funciona muito bem. Nem todo mundo usa jQuery tão feliz em ver outra opção.
Lukus 25/04
isso pressupõe que os usuários usam apenas o mouse
pcnate
pode usar onfocus = "this.focus (); this.select ()" para teclado
Muhammad Nadeem
21

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.

Cizar
fonte
1
+1 para o uso de um para impedir uma única ativação. Eu realmente não gostei de não poder selecionar texto com o mouse após o clique inicial.
pLuc
13

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()}
/>
Aniruddha Shevle
fonte
2
Isso funciona para mim no React:onFocus={(e) => e.target.select()}
Paito 27/07
11

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

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});
Jamie Pate
fonte
Esta é a solução que eu uso e prefiro. Eu uso um valor de tempo limite 0, pois isso fará com que ele seja adicionado ao final da fila de eventos atual, o que significa que será executado após o evento "mouseup".
DavidM
4

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>
user3296743
fonte
3

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 ...

H2Os
fonte
Não. Você está dando uma solução para um problema auto-gerado. Se você olhar corretamente para a resposta, elas serão vinculadas apenas mouseupaos campos de entrada de texto e não a numbers. Este problema não deve vir, portanto
Om Shankar
O problema com a ligação do mouse é que ele interfere ao mover o cursor dentro do campo. Esta é uma solução melhor, mas se você tabular no campo, a próxima redução do mouse será perdida (e o usuário não poderá mover o cursor com o mouse). É melhor do que perder todas as ratoeiras!
Colin Breame
3

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.

Adithya Kumaranchath
fonte
3

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

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.

Travis
fonte
Há um erro no seu código - o segundo método deve ser chamado "TextBoxMouseUp". Dê uma olhada na minha resposta, que usa uma abordagem semelhante.
Colin Breame
1
Note-se que onMouseUp=""e onMouseDown=""não são o padrão w3 correto. Eles deveriam ser onmouseup=""e onmousedown="". Como em outros atributos html, eles devem ser escritos em letras minúsculas e não em camel.
DrewT
2

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. :-)

Jonathan Gilbert
fonte
+1 Obrigado, mas como isso pode ser reescrito para que você não codifique o controle 'txtCustomer' no script? Existe uma maneira de transmitir um objeto 'this'?
Fandango68
Uma maneira seria criar uma função de utilitário para aplicar o comportamento a qualquer elemento, passado como parâmetro. Dentro dessa função, a referência do elemento seria codificada - para o parâmetro Você pode chamá-lo em qualquer número de elementos de entrada, identificados por qualquer meio que tiver à sua disposição. :-)
Jonathan Gilbert
Desculpe eu sou um noob. Você poderia atualizar sua resposta com um exemplo? Graças
Fandango68
1
Apenas envolva o código que escrevi em uma declaração de função que aceita um parâmetro chamado "txtCustomer". Eu recomendo renomear "txtCustomer" para outra coisa, mas se você não tiver certeza disso, funcionará tecnicamente com a variável denominada "txtCustomer". Ou seja: a função MakeTextBoxAutoSelect (txtCustomer) { o que eu escrevi acima }
Jonathan Gilbert
1
onclick="this.focus();this.select()"
Sourabh
fonte
1

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.)

ADTC
fonte
1

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

 $("#textBox").focus().select();
Vijay Vepakomma
fonte
0
$('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.

Michael Tranchida
fonte
Explique sua resposta em vez de apenas colar em algum código.
DavidG
0

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

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.

Exel Gamboa
fonte
A questão não possui o ASP.NET em lugar algum. : |
Mohamed Thaufeeq
É verdade que eu postei isso apenas no caso de o programador estar usando o ASP.NET. Pode ser útil para quem procura uma resposta usando a estrutura (como isso me ajudou). Estou apenas compartilhando e espero que alguém ache útil.
Exel Gamboa
Caso o programador esteja usando o ASP.NET, ele adicionará a tag 'asp.net' à pergunta. : |
Mohamed Thaufeeq
0

Semeio este aqui em algum lugar, funciona perfeitamente!

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

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);
        });
    }
});
Guillaume B.
fonte
sim, mas se você focuspor tabulações para o campo, você vai encontrar vários ouvintes de eventos mouseup anexando ...
Sebastian Scholle
-1

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

Mari
fonte