javascript - separador - JQuery permite solo dos números después del punto decimal

permitir solo un punto decimal en jquery

Question

Encontré la siguiente función JQuery here que evita que un usuario ingrese cualquier cosa que no sea un número o un solo decimal. La función funciona bien, pero me gustaría mejorarla para evitar que el usuario ingrese 3 o más lugares decimales, es decir, rechazar 99.999 y permitir 99.99. ¿Algunas ideas?

 function checkForInvalidCharacters(event, inputBox){                            
     if ((event.which != 46 || inputBox.val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57)) {          
                event.preventDefault();           
            }   
     };

Answer 1

¡gracias! He añadido la posibilidad de borrar los números y ''.'' una vez escrito:

El event.keyCode !== 8 realiza esa acción para retroceder .

El event.keyCode !== 46 hace esa acción para eliminar .

$( document ).ready(function() {

    $(''#Ds_Merchant_Amount'').keypress(function(event) {
    if ((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57) ) {
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
    if(($(this).val().indexOf(''.'') != -1) && ($(this).val().substring($(this).val().indexOf(''.''),$(this).val().indexOf(''.'').length).length>2 )){
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
  });
});

Answer 2

He actualizado esta rutina para permitir funciones de edición estándar, ya que se evitaron en el código anterior. (Esta rutina es solo para procesar un flotador, pero se puede adaptar para permitir solo 2 dígitos después del decimal)

var value = $(this).val().toString();

// Allowed Keys
if (event.which === 8 || event.which === 46 // Character delete
    || event.which === 16 || event.which === 17 // Modifier Key
    || event.which === 37 || event.which === 39  // Arrow Keys
    || (event.key.toLowerCase() === "a" && event.ctrlKey) // Select All
    || (event.key.toLowerCase() === "c" && event.ctrlKey) // Copy
    || (event.key.toLowerCase() === "x" && event.ctrlKey) // Cut
    || (event.key.toLowerCase() === "v" && event.ctrlKey) // Paste
    || (event.which === 45 && event.ctrlKey) // Old school copy (CTRL + INSERT)
    || (event.which === 46 && event.shiftKey) // Old school cut (SHIFT + DELETE)
    || (event.which === 45 && event.shiftKey) // Old school paste (SHIFT + INSERT)
    || (event.which === 35) // END
    || (event.which === 36) // HOME
    || (event.which === 35 && event.shiftKey) // SHIFT + END
    || (event.which === 36 && event.shiftKey) // SHIFT + HOME
    )
{
    return;
}
else if (event.which === 190) // Process decimal point
{
    if (value == "" || value.indexOf(".") > -1)
    {
        event.preventDefault();
    }
}
else if (event.which < 48 || event.which > 57 || event.ctrlKey || event.shiftKey) // Reject anything else that isn''t a number
{
    event.preventDefault();
}

Answer 3

He actualizado la función para algunos casos adicionales.

1. Permitirá números negativos.
2. Te permitirá editar la parte izquierda del decimal cuando ya hay 2 dígitos a la derecha
3. Te permite usar las teclas de flecha y el retroceso cuando estás en Firefox
4. También maneja datos pegados.

/**
 * Given an input field, this function will only allow numbers with up to two decimal places to be input.
 * @param {object} element
 * @return {number}
 */
function forceNumber(element) {
  element
    .data("oldValue", '''')
    .bind("paste", function(e) {
      var validNumber = /^[-]?/d+(/./d{1,2})?$/;
      element.data(''oldValue'', element.val())
      setTimeout(function() {
        if (!validNumber.test(element.val()))
          element.val(element.data(''oldValue''));
      }, 0);
    });
  element
    .keypress(function(event) {
      var text = $(this).val();
      if ((event.which != 46 || text.indexOf(''.'') != -1) && //if the keypress is not a . or there is already a decimal point
        ((event.which < 48 || event.which > 57) && //and you try to enter something that isn''t a number
          (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf(''-'') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
          (event.which != 0 && event.which != 8))) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }

      if ((text.indexOf(''.'') != -1) && (text.substring(text.indexOf(''.'')).length > 2) && //if there is a decimal point, and there are more than two digits after the decimal point
        ((element[0].selectionStart - element[0].selectionEnd) == 0) && //and no part of the input is selected
        (element[0].selectionStart >= element.val().length - 2) && //and the cursor is to the right of the decimal point
        (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf(''-'') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
        (event.which != 0 && event.which != 8)) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }
    });
}

forceNumber($("#myInput"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" />

Answer 4

La lógica es que cada vez que un usuario ingresa un número, debe verificar dos cosas.

1. ¿Ha introducido el usuario el punto decimal?
2. ¿Los decimales son más de dos?

Para el primero puedes usar $(this).val().indexOf(''.'') != -1

Para el segundo, puede usar $(this).val().substring($(this).val().indexOf(''.''), $(this).val().indexOf(''.'').length).length > 2

EDITAR-1
Además, debes agregar event.which != 0 && event.which != 8 para que las teclas de flecha y el retroceso funcionen en Firefox (comentario de Manoj)

EDIT-2
Además, debe agregar $(this)[0].selectionStart >= text.length - 2 para que pueda agregar dígitos si el cursor está a la izquierda del punto decimal (comentario BIdesi)

EDIT-3
Además, tienes que comprobar si el usuario eliminado . y lo colocó en otro lugar creando un valor con más de 2 dígitos después del decimal. Así que tienes que agregar $this.val($this.val().substring(0, $this.val().indexOf(''.'') + 3)); Para cortar dígitos extra (comentario de Gilberto Sánchez)

EDITAR-4
Para manejar los datos pegados, debe enlazar un controlador de eventos de pegado. Luego, debe verificar si los datos pegados tienen . con text.indexOf(''.'') > -1 y más de 2 dígitos después del decimal con text.substring(text.indexOf(''.'')).length > 3 . Si es así, tienes que cortar dígitos adicionales. También tienes que verificar que el usuario ingresó el ingreso numérico con $.isNumeric() (darasd comentario).

Aquí está el código:

$(''.number'').keypress(function(event) {
    var $this = $(this);
    if ((event.which != 46 || $this.val().indexOf(''.'') != -1) &&
       ((event.which < 48 || event.which > 57) &&
       (event.which != 0 && event.which != 8))) {
           event.preventDefault();
    }

    var text = $(this).val();
    if ((event.which == 46) && (text.indexOf(''.'') == -1)) {
        setTimeout(function() {
            if ($this.val().substring($this.val().indexOf(''.'')).length > 3) {
                $this.val($this.val().substring(0, $this.val().indexOf(''.'') + 3));
            }
        }, 1);
    }

    if ((text.indexOf(''.'') != -1) &&
        (text.substring(text.indexOf(''.'')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
    }      
});

$(''.number'').bind("paste", function(e) {
var text = e.originalEvent.clipboardData.getData(''Text'');
if ($.isNumeric(text)) {
    if ((text.substring(text.indexOf(''.'')).length > 3) && (text.indexOf(''.'') > -1)) {
        e.preventDefault();
        $(this).val(text.substring(0, text.indexOf(''.'') + 3));
   }
}
else {
        e.preventDefault();
     }
});

.number {
  padding: 5px 10px;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number" />

Answer 5

Prueba esto

HTML

<input type="text" id="min_rent" name="min_rent" onkeypress="return isPrice(event,$(''#min_rent'').val())">

Jquery

function isPrice(evt,value) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if((value.indexOf(''.'')!=-1) && (charCode != 45 && (charCode < 48 || charCode > 57)))
        return false;
    else if(charCode != 45 && (charCode != 46 || $(this).val().indexOf(''.'') != -1) && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

demo Link trabajado

Answer 6

También se puede hacer con una expresión regular:

    $(''.class'').on(''input'', function () {
        this.value = this.value.match(/^/d+/.?/d{0,2}/);
    });

Nombre el selector css .class a lo que quiera y póngalo en la entrada.

Answer 7

Valores numéricos con punto decimal hasta 2 puntos de validación decimal. Dependencia jQuery .

HTML -

<span>Float</span>
<input type="text" name="numeric" class=''allownumericwithdecimal''>
<div>Numeric values only allowed  (With Decimal Point) </div>

Código JQuery -

Método 1-

    $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/[0-9]*[.]{1}[0-9]{2}/i);
     var matchedString = $(this).val().match(patt);
     if (matchedString) {
         $(this).val(matchedString);
     }
     if ((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });

Método 2 -

 $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/(?<=/./d/d).+/i);
     $(this).val($(this).val().replace(patt, ''''));

     if ((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });