javascript - true - jquery mask tutorial

El complemento Jquery Masked Input permite dot

Question

Estoy usando el complemento de entrada JQuery Masked.

$("#percent").mask("99.99?9");

Esto permite números como 10.999, 10.99, 01.999, 01.99

Lo que quiero lograr es que no quiero que el usuario escriba 01.99 . En cambio, si el usuario escribe 1.99 , quiero 0 antes de que 1 se agregue automáticamente. Así es como empecé, pero no sé cómo continuar:

  //assume i typed in field 11.99
  $(document).on(''keyup'', ''#percent'', function(evt) {
    var input = $(this).val();
    alert(input); // 11.99_
    if(evt.which == ''190'' || evt.which == ''110'') {
       //if dot is clicked 
       alert(parseInt(input)); // 11
    }
});

Tenga en cuenta que la entrada de alerta imprime 11.99_ con guion bajo al final ya que el tercer valor es opcional y no lo he ingresado.

Ahora este valor es perfectamente normal pero si el usuario ingresara 1.99 , no podría, ya que automáticamente movería 9 hacia 1 para llenarlo con 2 dígitos, por lo que regresaría como 19.9 y esto no es válido ya que debe haber 2 decimales como se define arriba . Entonces, en mi sentencia if, quiero poder detectar si lo que se ingresó es menos de 10 , si es menos de 10 en puntos decimales, entonces agregue 0 al comienzo.

Ok, encontré una solución para underscore _ :

    $("#percent").mask("99.99?9", {placeholder: ""})

pero aún no soluciona otro problema al ingresar 1.99 siendo 19.9

Answer 1

Puede interceptar el comando de teclado para hacer esto, pero necesitará alguna forma de actualizar el estado del complemento.

El siguiente código funcionará:

$("#percent").bind({
    keydown: function(e) {
        // custom handler for dot
        var userInput = parseFloat($("#percent").val());
        if(e.which == ''190'' || e.which == ''110'') {
            // if entered number is integer and less than 10
            if(userInput % 1 === 0 && userInput < 10) {
                // prevent default mask input handlers from calling
                e.preventDefault();
                e.stopImmediatePropagation();

                // update value
                $("#percent").val(''0''+userInput+''.'');

                // simulate paste event to refresh mask input plugin state
                $("#percent").trigger(''paste'').trigger(''input'');
            }
        }       
    }
}).mask("99.99?9", {placeholder: ""});

Trabajando JSFiddle aquí