Evento onkeyup e métodos toLowerCase e toUpperCase em JavaScript. Dica 23

Nesta dica nós conferimos como funciona o acionamento do evento onkeyup e como converter todas as letras em minúsculo e maiúsculo utilizando os métodos toLowerCase e toUpperCase em JavaScript.

O vídeo complementa o texto e o texto completa o vídeo, assista.

Em nosso documento HTML inicial temo três inputs do tipo texto, onde o primeiro está acompanhado de uma tag span e, os outros dois só tem um id, um para cada input.

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript dica 23</title>
        <script src="js23.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>JavaScript dica 23</h1>
        <p>Evento onkeyup</p>
        <input type="text">
        <span id="eventoKeyup"></span>
        <br><br>
        <p>onkeyup + toLowerCase</p>
        <input type="text" id="tudasminusculas">
        <br><br>
        <p>onkeyup + toUpperCase</p>
        <input type="text" id="tudasmaiusculas">
    </body>
</html>

O nosso arquivo .js está em branco e começaremos editando o HTML.

No primeiro input nós vamos declarar o evento onkeyup já informando uma função que ainda criaremos no JS.

<p>Evento onkeyup</p>
<input type="text" onkeyup="up()">
<span id="eventoKeyup"></span>

Nesta dica temos três exemplos, o primeiro exemplo é baseado na dica 21 deste curso, vamos contar quantas vezes o evento é acionado. Já no JS criamos uma variável de valor inicial 0 (zero).

var a = 0;

Criamos uma função, cujo o nome acabamos de informar no HTML.

function up () {
}

E usamos document.getElementById para gerenciar o conteúdo da tag span a partir do seu id, id este que já estava declarado no HTML inicial.

function up () {
document.getElementById("eventoKeyup")
}

E utilizamos innerHTML para fazer esta contagem.

function up () {
document.getElementById("eventoKeyup").innerHTML = a+=1;
}

Teste em seu navegador.

Depois de conferir como o evento onkeyup é acionado nós damos continuidade nesta dica, já informando que os exemplos dois e três serão feitos juntos.

Método toLowerCase

O método toLowerCase converte uma sequência de letras em letras minúsculas.

Método toUpperCase

Já o método toUpperCase converte uma sequência de letras em letras maiúsculas.

Em nosso segundo e terceiro input declaramos o evento onkeyup novamente, já informando a função que criaremos no JS.

<p>onkeyup + toLowerCase</p>
<input type="text" id="tudasminusculas" onkeyup="minuscula()">
<br><br>
<p>onkeyup + toUpperCase</p>
<input type="text" id="tudasmaiusculas" onkeyup="maiuscula()">

Para esses dois exemplos vamos precisar de mais duas variáveis, eu gosto de declarar variáveis tudo no mesmo lugar.

var a = 0;
var min;
var mai;

A função que vamos utilizar o método toLowerCase eu coloquei o nome de minuscula.

function minuscula () {
}

E a função que vamos utilizar o método toUpperCase dei o nome de maiuscula.

function maiuscula () {
}

Essas funções serão um pouco diferentes, mas por que?

Porque eu preciso declarar o valor das minhas variáveis. Mas antes de declarar que essas variáveis converterão tudo em maiúsculo ou minúscula precisamos declarar onde iremos utilizar essas variáveis.

Dentro da função com o nome minuscula declaramos a variável min, igualando ela a um document.getElementById para gerenciar o conteúdo desse input a partir do seu id.

min = document.getElementById("tudasminusculas");

Já na linha de baixo do código fonte informo que eu quero o valor da variável min.

min.value

Mas o que vamos fazer com esse valor?

min.value =

Vamos informar que esse valor será convertido todo em letras maiúsculas.

min.value = min.value.toLowerCase();

Antes de conferir esse exemplo funcionando já vamos fazer quase a mesma coisa com a outra função.

Dentro da função declaramos nossa variável mai, informando onde iremos gerenciar o conteúdo.

mai = document.getElementById("tudasmaiusculas");

Informamos que queremos o valor que está no input e, que vamos converter tudo em letras maiúsculas.

mai.value = mai.value.toUpperCase();

Teste em se navegador.

Observação, códigos fontes desse "tipo" eu não libero mais o código fonte final.

Dica

Altere o nome de todas as funções e de todos os IDs, um de cada vez para não correr o risco de se perder.

Espero que tenha gostado e que este código fonte e dica tenha sido útil, até mais.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.