Neste tutorial, você aprenderá como implementar uma máscara de entrada para números em formulários web utilizando JavaScript. Essa técnica é útil para formatar automaticamente números conforme o usuário os digita, melhorando a usabilidade e a apresentação dos dados. Vamos seguir passo a passo!
Passo 1: Preparação do HTML
Comece criando um arquivo HTML básico com um formulário contendo os inputs que deseja aplicar a máscara. Por exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Máscara para Números</title>
</head>
<body>
<form>
<label for="numberInput">Número:</label>
<input type="text" id="numberInput" class="numberInput" placeholder="0,000">
<!-- Adicione mais inputs conforme necessário -->
</form>
<script src="script.js"></script>
</body>
</html>
Neste exemplo, criamos um input com a classe numberInput e um placeholder indicando o formato esperado para o número.
Passo 2: Script JavaScript para Máscara de Números
Agora, vamos criar o script JavaScript (script.js) que aplicará a máscara de número ao input. Este script será responsável por formatar o número conforme o usuário digita.
document.addEventListener('DOMContentLoaded', function () {
function applyNumberMask(value) {
// Remove caracteres não numéricos, exceto o sinal de negativo
value = value.replace(/[^\d.-]/g, '');// Separa a parte negativa
var negative = value.charAt(0) === '-' ? '-' : '';// Remove o sinal de negativo para tratar a parte numérica
value = negative ? value.slice(1) : value;// Remove pontos e vírgulas para facilitar a formatação
value = value.replace(/[.,]/g, '');// Se o valor é menor que mil, preenche com zeros à esquerda
while (value.length < 4) {
value = '0' + value;
}// Separa a parte inteira e decimal
var integerPart = value.slice(0, -3);
var decimalPart = value.slice(-3);// Remove zeros à esquerda da parte inteira
integerPart = integerPart.replace(/^0+/, '');// Adiciona os separadores de milhar na parte inteira
integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');// Formata o valor final
var formattedValue = (integerPart === '' ? '0' : integerPart) + ',' + decimalPart;// Reinsere o sinal de negativo, se existir
return negative + formattedValue;
}// Seleciona todos os inputs com a classe numberInput
var numberInputs = document.querySelectorAll('.numberInput');
numberInputs.forEach(function (input) {
// Aplica a máscara ao valor inicial
input.value = applyNumberMask(input.value);// Adiciona o evento input para aplicar a máscara enquanto digita
input.addEventListener('input', function (event) {
var target = event.target;
var newValue = applyNumberMask(target.value);
target.value = newValue;
});
});
});
Explicação do Script:
-
applyNumberMask(value): Esta função remove caracteres não numéricos, exceto o sinal de negativo, formata o número com separadores de milhar e vírgula decimal, e mantém o sinal negativo no início, se existir.
-
Evento DOMContentLoaded: Aguarda o carregamento completo do documento para garantir que todos os elementos estejam disponíveis para manipulação.
-
Aplicação da Máscara: O script aplica a máscara tanto ao carregar a página quanto enquanto o usuário digita no input.
Conclusão
Implementar uma máscara de entrada para números em formulários web usando JavaScript pode melhorar significativamente a experiência do usuário ao formatar automaticamente os números conforme são digitados. Este tutorial fornece uma base sólida para começar a implementar essa funcionalidade em seus projetos web, garantindo melhor usabilidade e apresentação dos dados para os usuários.
Experimente integrar este código em seus próprios formulários e adapte conforme necessário para atender aos requisitos específicos do seu projeto.
Por: Jesrreel Paulo
Elaborado em 28/06/2024