javascript - only - ¿Restringir a 2 lugares decimales al presionar una tecla de un cuadro de texto?

validate numbers javascript

Question

Quiero ingresar un punto decimal en un cuadro de texto. Quiero restringir al usuario ingresando más de 2 dígitos después del punto decimal. He escrito el código para lograr eso en el evento Keypress.

function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    if (charCode == 46 && el.value.indexOf(".") !== -1) {
        return false;
    }

    if (el.value.indexOf(".") !== -1)
    {
        var range = document.selection.createRange();

        if (range.text != ""){
        }
        else
        {
            var number = el.value.split(''.'');
            if (number.length == 2 && number[1].length > 1)
                return false;
        }
    }

    return true;
}
<asp:TextBox ID="txtTeamSizeCount" runat="server" onkeypress="return validateFloatKeyPress(this,event);" Width="100px" MaxLength="6"></asp:TextBox>

El código funciona pero el problema es: si ingreso ".75" y luego lo cambio a "1.75" , no es posible. La única manera de hacerlo es eliminarlo por completo y luego escribir "1.75" . Este problema ocurre si ya hay 2 dígitos después del decimal en el cuadro de texto. Las condiciones que impongo son

a) Después de que el decimal esté presente, debe tener al menos 1 o 2 dígitos. Se aceptan ex .75 o .7 o 10.75 o 333.55 o 333.2 . pero no .753 o 12.3335

b) Antes del decimal, no es obligatorio para el usuario ingresar un valor. El usuario también debe poder ingresar números enteros también.

¿Me puede decir cuál podría ser el problema?

Gracias,
Jollyguy

Answer 1

Considere aprovechar la API de Validación de Restricciones de HTML5. No impido necesariamente escribir valores no válidos, pero el campo se marca como no válido y detiene el envío de <form> (de forma predeterminada). Agregué el <output> para ilustrar por qué el navegador considera, por ejemplo, "1.100" un valor válido (ve el valor numérico como "1.1").

<input id="n" type="number" step=".01">

var
  n = document.getElementById(''n''),
  o = document.getElementById(''o''),
  didInputN = function(e) {
    o.value = n.valueAsNumber;
  };

n.addEventListener(''input'', didInputN);

input:invalid {
  color: white;
  background-color: red;
}

<input id="n" type="number" step=".01">
<output id="o" for="n"></output>

Filosóficamente, podría considerar esto como un enfoque más útil, ya que le permite al usuario pegar una entrada no válida y editarla directamente en el campo.

Answer 2

Estabas casi allí. Simplemente verifique que no haya más de 2 caracteres después del decimal.

ACTUALIZACIÓN 1: compruebe la posición de quilates para permitir la inserción de caracteres antes del decimal.
ACTUALIZACIÓN 2: problema correcto señalado por el comentario de ddlab y solo permite un punto.

 function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split(''.'');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //just one dot (thanks ddlab)
    if(number.length>1 && charCode == 46){
         return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
        return false;
    }
    return true;
}

//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd(''character'', o.value.length)
        if (r.text == '''') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}

http://jsfiddle.net/S9G8C/1/
http://jsfiddle.net/S9G8C/203/

Answer 3

Puedes hacerlo de otra manera con el evento onchange, para no restringir al usuario a escribir, sino simplemente convertir el número después de tipear, para uniformizar, como este,

function validateFloatKeyPress(el) {
    var v = parseFloat(el.value);
    el.value = (isNaN(v)) ? '''' : v.toFixed(2);
}

<input id="aninput" type="text" onchange="validateFloatKeyPress(this);" />

45.846 debe ser 45.85 pero en tu código el usuario debe convertir su auto-escritura y luego escribirá 45.85 directamente

Answer 4

este código es muy completo, cambio "." a ",":

• no puedo "," en comenzar

• no puedo escribir más ","

  <script type="text/javascript">
  
      function isNumberKey(evt, el) {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          var number = el.value.split('','');
          var caracter = el.value;
  
          if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
              return false;
          }
  
          if (charCode == 44 && caracter == "") {
              return false;
          }
  
          if (charCode == 44 && caracter.indexOf(",") != -1) {
              return false;
          }
  
          //get the carat position
          var caratPos = getSelectionStart(el);
          var dotPos = el.value.indexOf(",");
          if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
              return false;
          }
          return true;
      }
  
      function getSelectionStart(o) {
          if (o.createTextRange) {
              var r = document.selection.createRange().duplicate()
              r.moveEnd(''character'', o.value.length)
              if (r.text == '''') return o.value.length
              return o.value.lastIndexOf(r.text)
          } else return o.selectionStart
      }
  
  </script>

Answer 5

1.)No multiple decimals points.
2.)Two numbers after decimal point.
3.)Allow only Numbers and one decimal point(.).

Esto ayudará. jsFiddle

Answer 6

 function decimalValidation(el, evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode;
       var number = el.value.split(''.'');
         if(charCode == 8) {
          return true;
         }
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        //just one dot
        if(number.length>1 && charCode == 46){
             return false;
        }
        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
            return false;
        }
        return true;
    }

function getSelectionStart(o) {
    return o.selectionStart
}

Hola @webvitaly El código anterior también funcionará en IE. Por favor, comprueba y retrocede después de que los decimales no funcionen en Mozilla. Actualicé mi respuesta.