Great plugin! I have run into some issues with the jQueryUI datepicker, though. Whenever I try to set the date via datepicker. teh month comes out incorrect and the date is truncated tot eh first character. So selecting April 26 2012 gives me "26/01/2___" instead

here is a snippet
It has some .net embedded in it
$("#<%= uiDateText.ClientID %>")
.datepicker({
numberOfMonths: 1,
showAnim: 'blind',
changeMonth: true,
changeYear: true,
constrainInput: true,
dateFormat: '<%= GetDateFormat() %>',
monthNames: [<%= GetMonthNames() %>],
monthNamesShort: [<%= GetMonthNamesShort() %>],
dayNames: [<%= GetDayNames() %>],
dayNamesShort: [<%= GetDayNamesShort() %>],
dayNamesMin: [<%= GetDayNamesMin %>],
<% if (ShowButtonImage = true) then %>
<%= "buttonImage: '" + GetButtonImageURL("Images/calendar.jpg") + "'," %>
<%= "showOn: 'button'," %>
<% else %>
<%= "showOn: 'focus'," %>
<% end if %>
buttonImageOnly: true,
showButtonPanel: true,
nextText: '>',
prevText: '<'
});

    }
    var dateFormatforMask;

    $("#<%= uiDateText.ClientID %>").inputmask("d/m/y");

Hi Robin,

The following use case is at hand; people are allowed to enter a country code phone number (for instance 31 for the Netherlands, but 352 for Luxemburg).

So i have used the following code:
$('#phonecode').inputmask('99999');

This would mean that there can be 5 numbers entered.

Here comes the tricky part:

• Since it is a number (could also be used for money fields), i would like to have this field right aligned (style=text-align: right;)
• But i would like the mask to be 'removed' when the focus is lost. For instance, if i enter now something like "31" for the netherlands, the field stays like "31___" and is right aligned.

Do i miss some settings/options or is this an enhancement?

Hi!

If I declared a numeric input like below, the first char is "not working".
If I hit the left arrow key (move to the 2 position from right) works fine and I can write something like : "€ __.545.454,5"

No error in firebug, just I can't write the first number.

<script type="text/javascript">
    $(function(){
        $('#test').inputmask('€ 999.999.999,99', { numericInput: true });
    });
</script>
<form>
    <input type="text" name="money" id="test" />
</form>

I'd like to have the placeholder visible even when mouse hover = false so that it is more intuitive for users particularly on touch devices that don't have mouse hover.

When changing the value programatically, it is only detected when done through jquery.val but not when done via pure javascript value =

When using the input mask with dutch postal codes, i would like to transform the input to uppercase, without restricting the users to enter uppercase chars.

So the mask would become "9999 aa" but when the user enteres "1234 aa" the "a" is converted to uppercase without showing the lowercase "a" (e.g. immediate casing). Also, pasting the value "1234 aa" should be pasted as "1234 AA".

Solutions offered on the official page this plugin was forked from does not help with the "paste" issue.

Regards,
Gilles

When I have this script loaded and an instance of the datepicker ui, the datepicker automatically opens without a click and is positioned in a random position on the screen. Also the form field that has focus is the last field using .inputmask. Any thoughts as to how to get around these issues and still use both your script and datepicker?

I have web application that targets a global audience. I am using a combination of inputmask and jQueryUI's datepicker. I want to set the date format appropriately (for example, m/d/y or d/m/y). I was going to create a switch statement to get the server side date format <%= GetDateFormat() %> and then apply the appropriate alias as needed. Does this functionality already exist in the inputmask code? I don't want to reinvent the wheel :)

switch('<%= GetDateFormat() %>')
{
case 'mm/dd/yy':
$.extend($.inputmask.defaults.aliases, {
'date': {
mask: "m/d/y"
},
'<%= GetDateFormat() %>': {
alias: "date"
}
});

break;

default:

$.extend($.inputmask.defaults.aliases, {
        'date': {
            mask: "d/m/y"
        },
        '<%= GetDateFormat() %>': {
        alias: "date"
    }
});

}

Love the plug-in. Got tired of using of using the Bush plugin that hasn't been updated in forever. Question ... is it possible to make an email mask (with the @ sign)?

I'm using inputmask to format telephone numbers. I'd like to set it up so that I am able to change the mask based on context of whether it's the USA/Canada, UK, or other countries. Ie,:
$("#user_phone").inputmask("mask", { "mask": "(999) 999-9999" });

Presently this context would be changing based on a dropdown for the country code. How would I implement this such that the mask will change context based on dropdown?

If I click in a field with a mask then click out of it, the validation error does not go away. I believe this is because of the place holders (I'm using _ ) even though the mask clears after leaving the field. This is also a problem with the base code from Josh. Perhaps there is a way to ensure that the mask clearing is the first thing that happens before blur? I know this is not Exactly your issue but it seems there is an opportunity here...

Hello,

i want to have a choice when i use the input mask with the alias date or dd/mm/yyyy the place holder is yy/mm/yyyy.

Thanks

Please provide the options of keeping the mask persistence.

Thanks....

Moreover, I couldn't find any explaination of cardinality and prevalidator regardings definitions

'd': { //day
"validator": "0[1-9]|[12][0-9]|3[01]",
"cardinality": 2,
"prevalidator": [{ "validator": "[0-3]", "cardinality": 1}]
},

suppose I have applied an input mask "9999-mm-dd" associated with a textbox (whose value is 1901-12-30). While the cursor is not at the end of the input mask, typing every valid character cause existing input shift to the right (unless I manually select one character)

i.e. if the caret position is at 0 (i.e. before 0) when I type 2, the resulting input become 2190-11-23 (instead it should become 2901-12-30).

This behavior is not desired for input mask with a fixed length.

http://www.examplet.buss.hk/jquery/caret.php jQuery addon for tracing caret position

Please fix it

If user doesn't enter the required amount of numbers/mask specified, on exit/blur of field, clear out the entire field.

I'm swapping the mask based on the type that it is.

This is read from the 2nd digit, in Australia, 07 would be a landline and all mobiles are 04.

So I'm swapping the masks as it's being typed.

However the mask when applied, moves the caret to the end and you can continue typing.

http://jsfiddle.net/wNCKs/

An onchange function that would be called each time the contents of the field is changed could be very useful.

The function should return a boolean that indicates if the field is formatted properly. If the function returns false then the keystroke should be rejected much like the keystrokes are rejected for not matching the pattern associated with the masks.

This could be used to allow much more complicated pattern matching such as detecting the nuances of dates.

Hi Robin, its me again, sorry :)

This feature request is for both money fields and percentage fields.

As example: i have this mask:

$('#percentage').inputmask({ placeholder: ' ', 'mask': '999.99', numericInput: true });

(or)

$('#feeinputmask({ placeholder: ' ', 'mask': 'EUR 999.99', numericInput: true });
(p.s. € does not work on UTF-8, and '�' is not translated to an euro sign)

Now the question is this:
I would like that the user can enter the '.' even though the user is not on the '.' mask position. For instance instead of forcing the user to enter "0.50" i would like the user to be able to enter "0.5" and tab out of the field, which would make it "0.50".

Is this possible using a combination of "validator" and "prevalidator" ?

Is there a way I could use knockoutjs with your pluggin and also have the options of 'autoUnmask': true, clearMaskOnLostFocus: true?

For some reason, if I have these set to true with knockoutjs also binding to the same fields then when I mouse over the fields it will clear the input values along w/ the mask.

Hi Robin,

I used phone number mask in project but when user press home and try to delete it's not working because pointer just before ( the bracket. can you please tell how to fix this

$("#phone").inputmask("mask", {"mask": "(999) 999-9999"});

Thanks

How to unmask?

example for mask:
$("#date").inputmask("m/d/y");

unmask?
$("#date").unmask();

Thanks,
Hari

It appears the if statement to sniff for lookupGetter is being ignored by Chrome, causing errors with _valueGet().

I found this questions somewhere on stackoverflow. I like the idea and will add this to the inputmask. (Robin)

-- quote --
figure, given a week and Red Bull, I could make something that does this, but first, I wanted to find out if it had been done already.

I know input masks already exist: For example, //____. So you can just type a date, and voila, 12/31/2010.

However, if I were to go in and realize I meant to put December 20th, I go to the 3 in 31, hit delete once, and now it displays 12/12/010_. That's not very helpful. It's because the internal value is still simply "12312010", so when you delete '3' it becomes "1212010", and that is inserted into the mask accordingly.

Is there any existing JavaScript mask that will enforce blocks? So that, if I did what I described above, it would then display 12/1_/2010? I don't mind if it still submits as "1212010", as long as it displays properly.

Would prefer a jQuery plugin, but straight JavaScript works.

Andrew

Full implementation of optional masks

Not work more in this new branch - Google Chrome.

Hi,

I'm using WatiN ( http://watin.org/ ) to test the UI, but when the test runs the mask does not appears.

Any idea why?

Thanks!

Add decimal support when using a mask like 99999,99 or 99999.99
Also an option to autoGroup 99999,99 to 99.999,99 would be nice

... and after this I will add some unit testing

$("#main-phone").inputmask({"mask": "99 (99) 999.9999", "placeholder": "-", clearEmpty: false });

I'm trying to show the current value of the input all the time (value="-- (--) ---.----") and not only on the hover and focus.
I tried searching everything but found nothing. Can you help?

How to change the mask of a field X without losing its content based on certain choices made ​​in another field.

Great work with this plugin! It's been really useful.

I have one issue with it's positioning:

1. Go here:
   http://jsfiddle.net/pmV9t/1/

2. Enter any random date

3. Move cursor to the very beginning of the form, and press backspace.

Result:
When you're at the very beginning of a form/textbox, pressing backspace should not do anything because backspace only deletes what's behind your cursor. However, when you press it here it deletes the character in front of it.

Backspace character does not always fire, .keydown event

Hello,

I was looking for the clearIncomplete feature but I didnt see it anywhere in your documentation. The only way I found it was by looking through your source code.

First off thank you for an amazing plugin.

I have been working with an old version of the plugin (.3.5) but have noticed this behavior in the current version as well - in the version I have the following code fires on blur :

bind("blur.inputmask", function() {
var input = $(this);
input.removeClass('focus.inputmask');
if (_val.call(input) != undoBuffer) {
input.change();
}

In my case I was masking a date field (.inputmask("m/d/y")).

If the user tabs into the field when blank and then tabs out without making any changes then the following is true:
_.val.call(input) == "__//" (I am not using the autoUnmaskoption as I normally want the slashes saved with my data)
undoBuffer = ""

This causes the change event to fire.

To me it would seem if the user hasn't entered any data and just tabbed into and out of the field that the change event should not be triggered even if I am not using the autoUnmaskoption.

Is this the correct behavior?

If you enter on a masked textbox with the tab key the mask doesn't show.

I propose to add to the event declaration chain this code:

.bind('keyup.inputmask', function (event) {
if (event.keyCode == '9') {
setTimeout(function () {
caret(input, checkVal(input, buffer, true));
}, 0);
}});

This is somewhat related to my previously entered issue, but it would complicate the previous issue to much, therefore a new issue.

When, in a normal input field, you have the following configuration:

• style="text-align: right;"
• maxlength="5"
• $('field).inputmask({ mask: '99999', clearIncomplete: true });
• And start typing text "123"

You get: "123__"

But, since we right align the text, we would expect: "__123"

So i added the "dir" property: dir="RTL" which nicely right aligns.
But, typing "123" puts the cursor before the 1; giving "__|123" while the cursor should be "__123|"
Also, tabbing out of this field clears the field entirely.

Again, it could be that i am missing settings, but inputmask should respect the dir property.

When I use $("#date").inputmask... the library works fine, but when I try to use it as class it doesn't apply the mask.

I'm using this in tandem with your extensions library too.

ex:

phone => (99)999 99 99
dd/mm/yyyy => d/m/y
...

Wasn't sure how else to contact you. I wanted to know if you're considering a license for this plugin?

Hi Robin,

I'm trying to set up a numeric mask with a first fixed part: i.e 0506-9999-999999. I've successfully used the escape char to insert the first four chars in the mask and the input is masked correctly.

There is alas a problem when a buffer rewrite is triggered and the fixed part of the mask is being written with a sliding effect on the input.

Am I missing something to canonically handle my scenario?

Thanks in advance

Hi Robin,

I want put mask on onfocus event and onblur display normal text unmask

Here is my code but it's not working i also tried $('#txtSSN').inputmask('remove'); on blur but this is not working on chrome. can you please suggest me ASAP

(function($) {
$(document).ready(function() {

        $('.ssn').focus(function() {
            //alert('in');
            $(this).inputmask('ssnMasked');


        }).blur(function() {

        $('#txtSSN').inputmask('unmaskedvalue');


        });
    });
})($);

Hi, I use this plugin in many of my projects, but I find myself adding definitions for hour and minutes every time. Could you please consider adding:

            'i': { //minute
                "validator": "[0-5][0-9]",
                "cardinality": 2,
                "prevalidator": [{ "validator": "[0-5]", "cardinality": 1}]
            },
            'H': { //hour
                "validator": "[01][0-9]|2[0-3]",
                "cardinality": 2,
                "prevalidator": [{ "validator": "[0-2]", "cardinality": 1}]
            },