Added "autoclear" setting so invalid values persist

[gburghardt]

To increase usability, add a new setting that keeps invalid values in the
input field to give the user a chance to correct a mistake. If the user
fat fingers the value on accident and doesn't realize it before tabbing
away from the form field, the invalid value will remain so the user can
correct the value rather than retyping it.

• Added new setting called "autoclear", defaulting to true, to maintain
  existing behavior.
• When autoclear=false, leave invalid values visible so the user can
  correct their mistake.
• Added test coverage for when the mask(...) is first invoked
  (Init.Spec.js)
• Added scenarios to Focus.Spec.js to cover new functionality
• Repackaged the distribution version to include this new feature

[gburghardt]

I just discovered a bug with this implementation:

<input type="text" id="foo" value="">
$("#foo").mask("(999) 999-9999", { autoclear: false });

With an empty value, the mask shows up without focus on the field.

[                ] <-- Blank value is expected with no focus
[ (___) ___-____ ] <-- Actual result: the mask shows up

The default behavior is to hide the mask until setting focus. I need to implement this feature. The change looks to be pretty easy. I'll update the pull request.

[gburghardt]

Commit b9c0097c176d41c9d7e3d3dd6be5fed8115abcda resolves the issue with the mask showing up without focus on the field when "autoclear" is set to false. Ready for review.

[envisagenow]

We were looking to implement the same behavior for this plugin, and after looking into the issue, I saw that you can get the behavior using the 'optional' specifier at the beginning of your mask string. e.g. $('#phone').mask('?999-999-9999');

However, this is not really the intended use of that mask element, and is pretty counter-intuitive for anyone not already familiar to the library. Having an autoClear option seems like a good addition IMO.

[gburghardt]

@digitalBush - Is this something we can get merged in? I've seen this feature request several times in pull requests and issues. If you have any concerns, let me know. I can tweak the code or add test coverage as you see fit.

[digitalBush]

@gburghardt Hoping to sit down with this PR tonight and check things over. Have you had a chance to test this new functionality when used with the '?' marker? What do you think we should do there?

[digitalBush]

@gburghardt BTW, thank you for writing some specs to go along with your commit!

[gburghardt]

@digitalBush said:

Have you had a chance to test this new functionality when used with the '?' marker?

That's actually a really good question. I haven't tested it with the "?" marker yet. I'll add some more specs and dig in to how this marker works.

And another question is, how would you like it to work? :)

[nickdurcholz]

Hello, I was the individual who originally posted using the envisagenow account, and am now using this one so I receive the github email.

I have no strong opinion on which implementation to use. If you want to look at what I was talking about regarding implementing it using the optional marker, I pushed my original try at implementing the same to envisagenow/autoclear-optional branch (envisagenow@297f38b).

Either way works, I think. When I came across gburghardt's pull request, I abandoned my change and put his implementation in our app. Our testers didn't find any issues with it.

[digitalBush]

@gburghardt My initial reaction is to just ignore the ? marker.

[gburghardt]

@digitalBush I merged your master branch into my autoclear branch and fixed a few conflicts in jquery.maskedinput.js. I added test coverage around the optional marker in Focus.Spec.js and Raw.Spec.js. I updated the demo as well to include examples with autoclear: false.

If you have autoclear set to false, any placeholder characters past the "?" marker in the text field get stripped out when losing focus.

$("#foo").mask("(999) 999-9999? x999999", { autoclear: false });

Text field display

With Focus	On Blur	$("#foo").mask()
(555) 123-4567 x______	(555) 123-4567	5551234567
(555) 123-456_ x______	(555) 123-456_ x______	555123456
(555) 123-4567 x123___	(555) 123-4567 x123	5551234567123

The specs in Raw.Spec.js assert that the unmasked values do not contain any of the masked characters

[digitalBush]

Merged. Thanks for work!