Aprenda a criar campos para dinheiro em HTML para permitir que os usuários insiram valores monetários de forma correta e padronizada nos formulários do site.
Aqui, chamo de campo de dinheiro aos compos input dum formulário onde os usuários podem inserir valores em reais. Mas, há diversos outros nomes para isso. Além de “campo de dinheiro”, outros termos comuns usados são “campo de moeda” ou “campo de valor monetário”.
No post Criar Campo que Só Aceite Número em HTML aprendemos a criar um campo <input type=”number”> onde só aceite números como entrada. Se o usuário tentar digitar vogais ou consoantes não terá sucesso. Muitos poderiam usar esse campo para inserir valores de dinheiro, mas, pessoalmente, acho muito melhor usar um plugin JQuery para realizar essa função.
Usando JQuery para criar campos de dinheiro
Dentro da tag <head> insira as linhas para nosso frameqork JQuery e do nosso plugin chamado maskMoney. Sim, usaremos um plugin para criar máscaras.
<script src="//code.jquery.com/jquery.js"></script> <script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
Chame a máscara. Coloque o trecho abaixo em alguma parte do seu código. Irei inserir antes da tag </head>
<script>
$('.dinheiro').mask('#.##0,00', {reverse: true});
</script>
Agora, crie o campo onde inseriremos valores em real (dinheiro). Crie uma classe, aqui, chamei ela de class=”dinheiro”
<form> <label for="valor">Valor:</label> <input type="text" name="valor" class="dinheiro form-control" > <input type="submit" name="enviar" value="Enviar"> </form>
Código completo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
<script src="//code.jquery.com/jquery.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<script>
$('.dinheiro').mask('#.##0,00', {reverse: true});
</script>
</head>
<body>
<form>
<label for="valor">Valor:</label>
<input type="text" name="valor" class="dinheiro form-control">
<input type="submit" name="enviar" value="Enviar">
</form>
</body>
</html>
Fonte: github