jquery masked input plugin to not clear field when errored

Question

I'm looking at the http://digitalbush.com/projects/masked-input-plugin/

I'm calling it like this:

$(control).mask('999-999-9999');

And I don't want it to throw away the users input if something is wrong, e.g. they haven't finished

[407-555-____]

If you leave the field after having typed this much, it clears it. I'd like to leave it so they can finish later.

I'm new to jQuery, and I've looked through his source, but I can't find any way to do that, nor can I find any way to edit it to accomplish what I want, because the code is arcane to my eyes.

Check this out it might help http://jsfiddle.net/elclanrs/eanS5/ — elclanrs, Mar 20 '12 at 21:27
@elclanrs I don't see how that pertains to my question about the masked input plugin. Your code doesn't do any masking? — McKay, Mar 20 '12 at 21:29
Oh misunderstood the question. I thought you wanted users to alert while on blur but it seems you want to do the opposite right? — elclanrs, Mar 20 '12 at 21:31
I want no changes to the input to be made when the user leaves the field. — McKay, Mar 20 '12 at 21:48
Cool got it and the [link] view.jqueryui.com/mask/tests/visual/mask/mask.html ; does exactly what you need but not sure which version of the plugin you are using **Jquery** does use digitalBush see my links below, hope it helps :) — Tats_innit, Mar 20 '12 at 21:52

score 58 · Answer 1 · edited Feb 18 '14 at 16:52

58

Set autoclear option to false.

$(control).mask('999-999-9999', {autoclear: false});

edited Feb 18 '14 at 16:52

McKay

12,334
7
53
76

answered Feb 07 '14 at 19:54

Angela Nicholas

581
4
3

4

That looks like a good solution, it sounds like the right solution, but alas, I don't work on that project anymore. – McKay Feb 07 '14 at 21:39
1

Thanks for the answer, it worked for me! For some reason they didn't include the autoclear option in their documentation... – Dmitry Gamolin May 28 '17 at 06:52

score 47 · Accepted Answer · answered Mar 20 '12 at 21:31

47

It looks like I should just make the whole mask optional:

mask('?999-999-9999')

That way the control thinks what the user has is "valid" and I can continue. Even though it isn't really the optional part of the mask.

answered Mar 20 '12 at 21:31

McKay

12,334
7
53
76

Does this set the default value of element to 0? – shasi kanth Dec 19 '13 at 07:53
it's a string mask, so the default value is the empty string. – McKay Dec 20 '13 at 03:40
Just to add... I ran into this issue as well and tried adjusting the plug-in with //Remove this to keep user entered text in field and do not destroy on blur if the user has not met the required length //else if (lastMatch + 1 < partialPosition) { // input.val(""); // clearBuffer(0, len); //} and that caused an issue with androids using the mask. I just tried with the method McKay is using and it looks like it works. If you are worried about validations and using something like jquery.validate, just set a min length including the mask characters and that should warn the user – isaac weathers Feb 25 '14 at 06:14

score 2 · Answer 3 · edited Jul 06 '12 at 11:19

2

You should delete statement input.val(""); in checkVal() function for a proper solution.

If you're using minified version, you should search and delete statement:

if(!a&&c+1<i)f.val(""),t(0,k);else

edited Jul 06 '12 at 11:19

DaveShaw

52,123
16
112
141

answered Jul 05 '12 at 16:23

Ahmet Polat

21
1

2

I'm not particularly a fan of modifying the binary, if I have a work around? – McKay Jul 06 '12 at 15:29
1

Hey Dave, i have no idea about doing this another way. can you give me an example please ? – Ahmet Polat Jul 18 '12 at 13:57
I won't vote down, but almost always it's a really bad idea to modify the source code. Someone else might continue de project and upgrade the components to a new version, throwing away any undocumented change. Even yourself might upgrade it forgeting about some cryptic change you did months ago. – FercoCQ Nov 09 '16 at 14:05

score 1 · Answer 4 · answered Jul 23 '13 at 13:34

1

Try update file jquery.maskedinput.js

In function function checkVal(allow) set parameter allow on true. Its help for me.

 function checkVal(allow) {
                    allow = true; ///add this command
//..............
}

answered Jul 23 '13 at 13:34

Pepa

31
1

score 0 · Answer 5 · answered Mar 28 '13 at 17:09

In addition to removing the input.val("") in checkVal() you can also change the call to clearBuffer. In the original code it is: clearBuffer(0, len); removing all user input. if you change this to clearBuffer(lastMatch + 1, len); the user input will be displayed, followed by the mask placeholders that are still needed to complete correct input.

I have also added a user message in the .bind. This works for us, as we are using the MaskedInput for exactly one type of input. I'm checking for any input going further than position 7, because that's where the user input starts.

Here is what I did:

.bind("blur.mask", function() {
    // find out at which position the checkVal took place
    var pos = checkVal();
    // if there was no input, ignore
    if (pos <=7) {input.val(""); clearBuffer(0, len);}  
    // if the user started to input something, which is not complete, issue an alert
    if (pos > 7 && pos < partialPosition) alert("Tell the user what he needs to do.");
    if (input.val() != focusText)
    input.change();
})

score 0 · Answer 6 · answered Apr 25 '13 at 23:08

Adding Placeholder could solve the problem.

$(control).mask('999-999-9999');

Add an empty place holder into mask. see below

$(control).mask('999-999-9999', { placeholder: "" });

which would replace _ on the input text field by default. so there would bot be any _ left if the input length is dynamic and not fixed.

score -2 · Answer 7 · edited Jan 28 '15 at 18:24

-2

Looking for into the pluging script the unmask method.

$('#checkbox').unmask();

edited Jan 28 '15 at 18:24

Undo

25,519
37
106
129

answered Jan 28 '15 at 18:12

user1718433

7
2

jquery masked input plugin to not clear field when errored

7 Answers7

Linked