Tenho um textBox
valor monetário que esta com 0,00
, quando clico para digitar um valor exemplo 12345
, ele fica 10023,45
.
Gostaria de saber como posso arrumar isso com Javascript.
Tenho um textBox
valor monetário que esta com 0,00
, quando clico para digitar um valor exemplo 12345
, ele fica 10023,45
.
Gostaria de saber como posso arrumar isso com Javascript.
Uma maneira simples de resolver isso é, caso o valor seja 0,00 você limpa o campo quando houver focus nele.
document.querySelector('input[type=text]').addEventListener('focus', function () {
if (this.value !== '0,00') return;
this.value = '';
}):
O mesmo código usando jQuery:
$('input[type=text]').on('focus', function () {
if (this.value !== '0,00') return;
this.value = '';
}):
Existem outras maneiras, você pode selecionar todo o conteúdo do campo de forma que qualquer coisa digitada vai sobrescreve-lo por completo, exemplo:
document.querySelector('input[type=text]').addEventListener('focus', function () {
this.selectionStart = 0;
this.selectionEnd = this.value.length;
}):
Não esqueça de substituir o seletor input[type=text]
por um que se adeque ao seu código, sendo este com ID, classe ou outros atributos que identifiquem o(s) campo(s) que deseja aplicar o evento.
Basta usar o equivalente de PHP number_format()
para Javascript.
$("#omeuinput").keypress(function(e) {
var valor = $(this).val();
valor = number_format(valor, 2, '.', '');
$(this).val(valor);
});
function number_format(number, decimals, dec_point, thousands_sep) {
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function(n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
Elementos html
possuem gatilhos que são disparados por meio de eventos.
No elemento do seu formulário onde o valor monetário será inserido, você pode configurar uma ação para ser executada toda vez que o conteúdo de um determinado item for alterado.
Para isso você irá utilizar o recurso onChange
Função javascript para formatar valores monetários
<script type="text/javascript">
function formatMoney(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
function formatar(){
valor=document.getElementById("valor").value;
valorFormatado = formatMoney(valor, '.', ',');
document.getElementById("valor").value = valorFormatado;
}
</script>
No seu campo de texto
<input id="valor" type="text" onchange="formatar()">
Referencia sobre a função formatMoney