Precisa converter um texto em maiúsculo, minúsculo, primeira letra maiúscula? Então acompanhe os exemplos deste artigo e descubra como alterar a caixa de um texto qualquer ou enquanto escreve.
Para alterar um texto para maiúsculo em JavaScript, utilizamos o método toUpperCase(). Para alterar para minúsculo, utilizamos o método toLowerCase().
Veja abaixo outros exemplos de como alterar um texto enquanto escreve, e também outras formas de caixa como Title Case.
Alterando caixa em JavaScript
Para alterar um texto para maiúsculo, utilizamos o método toUpperCase(), nativo do objeto String.
let text = 'hello world';
// Maiúsculo
console.log(text.toUpperCase()); // HELLO WORLD
Para minúsculo, basta usar toLowerCase().
let text = 'Hello World';
// Minúsculo
console.log(text.toUpperCase()); // hello world
Somente a primeira letra maiúscula
No exemplo abaixo, pegamos a primeira letra usando text[0], transformamos em maiúscula, pegamos também o resto da string menos a primeira letra, usando slice(1) e transformamos em minúscula, depois concatenamos tudo.
let text = 'ricardo';
console.log(text[0].toUpperCase() + text.slice(1).toLowerCase()); // Ricardo
Title case
Title case é outra opção de alteração de caixa muito utilizada. Segue abaixo uma função que utiliza os mesmos métodos acima, só que aplica para todas as palavras utilizando split e join.
// O que essa função faz:
// 1. Converte o texto para minúsculas
// 2. Divide a string em um array, dando split nos espaços
// 3. Faz um map no array, convertendo a primeira letra em maiúscula
// 4. Converte o array em string através de um join
const titleCase = text => {
return text.toLowerCase()
.split(' ')
.map((word) => {
return word[0].toUpperCase() + word.slice(1);
}).join(' ')
}
titleCase('lorem ipsum dolor sit amet'); // Lorem Ipsum Dolor Sit Amet
Alterando para maiúsculas enquanto se escreve
Se você deseja alterar a caixa de um texto em um input enquanto se escreve, pode fazer uso de um event listener que verifica quando uma tecla é pressionada, veja o exemplo abaixo.
<input type="text" id="text">
document.getElementById('text').addEventListener('keyup', (ev) => {
const input = ev.target;
input.value = input.value.toUpperCase();
});
O mesmo código em jQuery ficaria:
$('#text').on('keyup', (ev) => {
$('#text').val($('#text').val().toUpperCase());
});
Como você pode notar, o método acima tem um certo delay para converter a caixa do texto, e isso é inevitável. Mas para fins estéticos, uma solução muito mais simples é utilizar apenas CSS, veja o exemplo abaixo.
Para fins estéticos, apenas utilize CSS
Se você precisa alterar o texto para maiúsculo ou minúsculo apenas para fins estéticos, sem alterar o real valor do campo, ou possa alterar o valor do campo posteriormente, você pode usar a propriedade CSS text-transform no input ou em qualquer outra tag HTML.
<input type="text" id="text" style="text-transform: uppercase">
Para converter o texto para minúsculo, basta usar text-transform: lowercase. Para a primeira letra maiúscula, use text-transform: capitalize.
