Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcurionovo

Como formatar casar decimais com Jquery?

Por , em Javascript

Recommended Posts

marcurionovo    0

marcurionovo
Postado

Tenho um script que funciona, ele formata as casas decimais com virgula, o problema é que se eu digitar apenas 20 então é enviado assim, sem as casas decimais, alguém sabe alguma forma de resolver isso? agradeço

<!-- apenas números-->
    <script>
    function somenteNumeros(num) {
        var er = /[^0-9,]/;
        er.lastIndex = 0;
        var campo = num;
        if (er.test(campo.value)) {
          campo.value = "";
        }
    }
    </script>

 
<input class="form-control input-sm " onkeyup="somenteNumeros(this);" placeholder="número" maxlength="5"  type="text />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá. Feliz ano novo moço.

 

Achei legal sua dúvida e acabei em empolgando. :-)

Fiz um exemplo aí que está precisando de teste. :-(

 

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colocando casas decimais</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="form.css">
</head>
<body>
  <form class="form">
    <label class="form-labelPrice" for="price" tabindex="1">Price:</label>
    <input class="form-inputPrice" type="text" placeholder="Numbers" id="price" tabindex="2">

    <input class="form-button" type="submit" value="Send" tabindex="3">
  </form>

  <script src="form.js"></script>
</body>
</html>

JavaScript

(function () {
  'use strict';

  var $formInputNumber = document.querySelector('.form-inputPrice');
  var isBackspace = /Backspace/;

  $formInputNumber.addEventListener('keypress', function (event) {
    var isDecimal = /[0-9 ,]|Backspace|ArrowLeft|ArrowRight|Tab/i;

    var keyValue = event.key;
    var thisValue = this.value;

    if (!isBackspace.test(keyValue) &&
        (!isDecimal.test(keyValue) ||
        thisValue.length == 5) ) {
      event.preventDefault();
    };
  });

  $formInputNumber.addEventListener('keyup', function (event) {
    var notStartNumber = /^[0 ]/;

    this.value = this.value.replace(notStartNumber, '');

    this.value = this.value.replace(/^([0-9]{2})([0-9]{2})$/, '$1,$2');
    this.value = this.value.replace(/^([0-9],[0-9][0-9])[0-9]/, '$1');
  });


  $formInputNumber.addEventListener('blur', function (event) {
    this.value = this.value.replace(/^([0-9]{1,2})$/, '$1,00');
    this.value = this.value.replace(/^([0-9]{1,2},)$/, '$100');
    this.value = this.value.replace(/^([0-9]{1,2},[0-9]$)/, '$10')
  });
})();

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #EFEFEF;
  background-color: #D1D5D8:
}

a {
  color: inherit;
  text-decoration: none;
}

input {
  font-size: inherit;
  font-family: inherit;
}

CSS (form.css)

.form {
  background-color: #28324E;
  width: 40%;
  padding: 5%;
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
  text-align: center;
}
.form-labelPrice {
  display: block;
  margin-bottom: .4em;
}
.form-inputPrice {
  display: block;
  box-sizing: border-box;
  width: 80%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .8em;
  height: 1.5em;
  border: 1px solid #2969B0;

  transition: border .2s linear;
}
.form-inputPrice:focus {
  border-width: 4px;
}
.form-button {
  display: inline-block;
  padding-left: 2%;
  padding-right:2%;
  background-color: #41A85F;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}

Qualquer dúvida só falar. Espero que ajude porque eu me diverti fazendo esse código.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito