javascript - jQuery Inputmask - decimal value negative or positive with mask in input element - Stack Overflow

I’m trying to add a inputmask to an input element which allows the user to enter a decimal between -90 and 90 with 0 to 4 numbers after the decimal separator (side note: I’m using jQuery validate for min & max value validation).

I was able to make it work for positive values using this code:

$("#id").inputmask("99,9{0,4}");

I tried to extend it to allow negative values with the following code:

$.mask.definitions['~']='[+-]';
$("#id").inputmask("~99,9{0,4}");

Which did not work; The value started always with a “–“ and it was not possible to replace it with a “+” or to remove it.

My last try was this:

$('#id').inputmask('decimal', { 
        radixPoint: ".", 
        integerDigits: 2,
        digits: 4,
        digitsOptional: true,
        autoGroup: true,
        allowPlus: true,
        allowMinus: true
    });

This works almost, but I have the following problems:

• The input element does not contain a visible mask (something like __.____)
• The user must enter the “-” or “+” sign as first character, it is not possible to add a minus to the start of the input.

My goal is to have an input element with a visible mask, preferably in the following format __.____, which allows the user to enter negative or positive values. The user should be able to add a minus sign to the start of the input (after (and before) he entered the number).

Edit: Added fiddle JSFiddle

I’m trying to add a inputmask to an input element which allows the user to enter a decimal between -90 and 90 with 0 to 4 numbers after the decimal separator (side note: I’m using jQuery validate for min & max value validation).

I was able to make it work for positive values using this code:

$("#id").inputmask("99,9{0,4}");

I tried to extend it to allow negative values with the following code:

$.mask.definitions['~']='[+-]';
$("#id").inputmask("~99,9{0,4}");

Which did not work; The value started always with a “–“ and it was not possible to replace it with a “+” or to remove it.

My last try was this:

$('#id').inputmask('decimal', { 
        radixPoint: ".", 
        integerDigits: 2,
        digits: 4,
        digitsOptional: true,
        autoGroup: true,
        allowPlus: true,
        allowMinus: true
    });

This works almost, but I have the following problems:

• The input element does not contain a visible mask (something like __.____)
• The user must enter the “-” or “+” sign as first character, it is not possible to add a minus to the start of the input.

My goal is to have an input element with a visible mask, preferably in the following format __.____, which allows the user to enter negative or positive values. The user should be able to add a minus sign to the start of the input (after (and before) he entered the number).

Edit: Added fiddle JSFiddle

• javascript
• jquery
• validation
• jquery-inputmask

Share Improve this question Follow edited Nov 23, 2016 at 10:54 musium asked Nov 23, 2016 at 10:36 musiummusium 3,09244 gold badges3737 silver badges7272 bronze badges 2

• for #1 use placeholder property – Vinod Louis Commented Nov 23, 2016 at 10:43
• #1 displays the placeholder, nearly correct… do you mean to add a placeholder attribute to the input. Btw. I’ve added a fiddle to show the problem. – musium Commented Nov 23, 2016 at 10:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

$("input.percentage").inputmask({
    alias: "percentage",
    digits: "2",
    rightAlign: false,
    suffix: "%",
    integerDigits: 5,
    digitsOptional: true,
    allowPlus: true,
    allowMinus: true,
    placeholder: "0",
    min: -1000,
    max: 1000,
    numericInput: true
  });

I used max and min to allow minus for the input with two decimal points.