JavaScript – foco em campo input text

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

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 :

1
HTMLElementObject.focus();

Exemplo de uso:

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

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

Sintaxe de uso:

1
HTMLElementObject .select();

Exemplo de uso:

1
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *