Cursos / Informática para Internet / Desenvolvimento Web I / Aula

arrow_back Aula 10 - JavaScript: Acessando Objetos - Parte 1

Input Text

O exemplo abaixo mostra um campo de texto que aumenta de tamanho à medida que o usuário vai digitando informação nele.

AخA
1
<html> 
2
    <head>
3
        <script type="text/javascript">
4
            function aumentar()  {
5
              var input = document.getElementById("textoCrescente");
6
              
7
              //tamanho do campo
8
              var tamanhoCampo = input.size;
9
              
10
              var texto = input.value;
11
              
12
              //tamanho de um string
13
              var tamanhoTexto = texto.length;
14
              
15
              
16
              //Para ficar sempre com um espaço a mais
17
              if(tamanhoTexto - 1 >= tamanhoCampo){
18
                 input.size = tamanhoCampo + 1;
19
              }
20
            }
21
        </script>
22
    </head>
23
    <body>
24
        <h2>Digite algo para aumentar:</h2>
25
        <br/>
26
        <form>
27
        <input id="textoCrescente" type="text"  onkeypress="aumentar()" size=3="" />
28
        </form>
29
    </body>
30
</html>

Versão 5.3 - Todos os Direitos reservados