JavaScript – Exemplo de como dar foco em um campo input text e selecionar todo o texto

Exemplo de como dar foco em um campo input text e selecionar todo o texto.
Para responder ao tópico proposto temos dois métodos no javascript:
• focus: usado para dar foco em campos input´s: texto (type: text), botão(type: button), radio(type:radio) e outros elementos, como janela(window), ancoras(a href), etc…
Sintaxe de uso :

HTMLElementObject.focus();

Exemplo de uso:

document.getElementById(“email”).focus();

• select: usado para selecionar o conteúdo de um campo inpu text

Sintaxe de uso:

HTMLElementObject .select();
 

Exemplo de uso:

document.getElementById("email").select();

Explicado o que faz os métodos focus() e select() vamos ao que interessa. Para dar foco em um campo input text e selecionar todos o seu conteúdo confira abaixo o código de exemplo:

<html>
    <head>
        <script type="text/javascript">
            function selecionaTexto()
            {
                document.getElementById("email").select();
            }

            function getfocus()
            {
                document.getElementById('nome').focus();
            }
            function losefocus()
            {
                document.getElementById('nome').blur();
            }

            function setFocoESelecionaTextoCampo(){
                document.getElementById('email').focus();
                document.getElementById("email").select();
            }

        </script>
    </head>
    <body>

        <form>
            email: <input type="text" id="email" value="someone@example.com" size="30" />
            <br>
            nome: <input type="text" id="nome" value="ricardo spinoza" size="30" />
        </form>

        <button type="button" onclick="selecionaTexto()">Selecione text campo email</button>
        <br>
        <button type="button" onclick="getfocus()">setar foco no campo nome</button>
        <button type="button" onclick="losefocus()">tirar foco no campo nome</button>
        <br>
        <button type="button" onclick="setFocoESelecionaTextoCampo()">Seta foco e seleciona texto campo email</button>

    </body>
</html>

Link do exemplo rodando: exemplo_focus_select.html

Referencia:
W3schools. Method focus – http://www.w3schools.com/jsref/met_html_focus.asp
W3schools. Method select – http://www.w3schools.com/jsref/met_text_select.asp

4 Comentários

Arquivado em JavaScript/Afins

4 Respostas para “JavaScript – Exemplo de como dar foco em um campo input text e selecionar todo o texto

  1. Douglas

    Muito obrigado! Ótimo script.

  2. Rafaella

    Ei Ricardo!
    Sou super iniciante e adorei a qualidade do seu post mas o que quero é tão simples e ainda não consegui, quando o formulário “cad_cliente” carregar apareceR o foco do cursor ” I ” no campo nome. Me ajuda fazendo favor!
    Abraço

    Rafa

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s