Linguagens para Internet

Linguagens Web

Como transformar letras minúsculas em maiúsculas com javascript

Olá, hoje vou explicar como transformar letras minúsculas em maiúsculas com javascript. Usaremos a função toUpperCase() do javascript, pois ela cumpre exatamente o propósito deste artigo, transformar minúsculas em maiúsculas.

Será necessário atrelarmos algum evento do javascript a um objeto, que poderá ser um campo de texto (input text), uma div, um parágrafo…

Função toUpperCase()

É importante salientar que o javascript é uma linguagem Case Sensitive, ou seja, as letras maiúsculas e minúsculas são considerados caracteres diferentes. Daí a importância em escrever os códigos corretamente, e como exemplo para este assunto, temos a própria função toUpperCase.

Forma correta: toUpperCase.

Qualquer escrita diferente não produzirá o resultado esperado, como: touppercase, ToUpperCase, toUppercase, etc. 

Saiba mais sobre a função toUpperCase clicando aqui

Neste artigo usaremos a função toUpperCase para transformar letras minúsculas em maiúsculas digitadas pelo usuário em um campo de texto. Vincularemos um evento a este campo de texto que disparará uma função.

O evento que mais gosto para esse caso é o onkeyup.

O evento onkeyup é disparado quando o usuário estiver soltando uma tecla pressionada. Veja bem que não é quando uma tecla é apertada e sim no exato momento em que ela está retornando a sua posição inicial.

Vamos ao código?

Como transformar letras minúsculas em maiúsculas com javascript

Para este artigo vamos utilizar a função toUpperCase para transformar cada letra minúscula digitada em um campo de texto em maiúscula, ou seja, ao soltar cada tecla pressionada uma função será chamada para efetuar a transformação.

Primeiramente o código HTML que demonstra o input text:

1
2
3
4
5
6
7
8
<body>
   <div id="mestre">
      <form name="formulario" id="campo">
	<h2>Digite um texto no campo abaixo:</h2>
	<input type="text" name="texto" onkeyup="alteraMaiusculo()" />
      </form>
   </div>
</body>

Detalhando o código HTML:

Linha 1: Tag body, inicia o corpo da página HTML.

Linha 2: Div com id mestre. Este id será usado apenas para estilizar a div no meio da página.

Linha 3: Iniciamos um formulário e atribuímos um id campo, para podermos recuperar o campo de texto ao usarmos o javascript.

Linha 4: Tag de cabeçalho nível 2.

Linha 5: Campo de texto de nome texto com o evento onkeyup atrelado para chamar a função javascript alteraMaiusculo() que criaremos jajá.

Linhas 6,7 e 8: Fechamento de tags  

Código CSS que estiliza a página:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#mestre{
	width:500px;
	text-align:center;
	margin:200px auto;
	}
h2{
	font-family:Arial, Helvetica, sans-serif;
	}
input{
	width:500px;
	height:40px;
	border:2px solid #999;
	line-height:40px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	}

E por fim o código javascript, que fará a transformação de letras minúsculas em maiúsculas:

1
2
3
4
5
function alteraMaiusculo(){
	var valor = document.getElementById("campo").texto;
	var novoTexto = valor.value.toUpperCase();
	valor.value = novoTexto;
	}

Detalhando o código javascript:

Linha 1: Declaramos uma função de nome alteraMaiusculo.

Linha 2: Criamos uma variável local chamada valor e atribuímos a ela um objeto que foi localizado no documento através do seu id. Neste caso o objeto localizado é o nosso formulário de id campo seguido de seu objeto filho de nome texto , que é o nosso campo (input) que receberá os dados digitados pelo usuário.

Linha 3: Criamos uma nova variável de nome novoTexto e atribuímos a ela o valor (value) que se encontra dentro do campo de texto já o modificando através da função toUpperCase do javascript.

Linha 4: Recuperamos a nossa primeira variável que contém o nosso objeto a sofrer a transformação a atribuímos ao seu atributo value o valor armazenado na variável novoTexto.

Assim, cada vez que usuário soltar uma tecla ao digitar os caracteres a função alteraMaiuscula é chamada e efetua a transformação letra a letra causando um efeito visual agradável.

exemplo centralizar imagem Veja um exemplo em funcionamento clicando aqui

download Faça download do arquivo clicando aqui.

Desta forma, explicamos como transformar letras minúsculas em maiúsculas com javascript em um campo de texto.

Espero que seja de utilidade na formatação de textos em formulários este simples script. Não deixe de dar a sua opinião. Até a próxima. 

, , ,

2 comentários para “Como transformar letras minúsculas em maiúsculas com javascript

  • Daniel disse:

    Cara, estou seguindo as orientações do seu blog, que pra mim, foi a melhor solução que encontrei, e mais explicada, mas tipo eu tou realizando isso pelo formulário do google docs, então eu acho que não precisa realizar a parte de HTML, e nem de css, porque já está tudo pronto, só falta aplicar a função, que não está funcionando D:, não sei porque, capturei os dados através do inspecionar elemento, pra saber a id do campo, eu não sei se essa solução funciona docs, da uma resposta ai porfavor obrigado !

    • Junior disse:

      Caro Daniel, agradeço a visita ao blog. Infelizmente não posso te ajudar com o google docs, pois nunca utilizei e também não pretendo. Para funcionar você precisa mexer no HTML e adicionar no campo (input) o evento onkeyup e chamar a função javascript. Porque você não cria sua própria estrutura? Tudo o que o google docs oferece você pode criar também.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>