jquery masked input plugin on input event not firing

Hi experts,

I'm using the jquery Masked Input Plugin located at this website:
http://digitalbush.com/projects/masked-input-plugin/

This is the version I'm using:
https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.js


Here is my working fiddle:

http://jsfiddle.net/tq0x6esr/

So when you run this fiddle you will a page that looks like this:

when I run my page
On page load a textbox with id="FormatTextBox" right underneath the dropdownlist is hidden.
When I select an item from the dropdownlist, the textbox becomes visible and has the masking applied to it.
So from the drop down list you can either choose Phone Number and Social.

Also, on page load the blue button is disabled and an image in the shape of a star is also hidden.


Also on the page is another textbox called id="TestTextBox" . This textbox is visible at all times and is located right under the text that says "This is a TextBox".
If you notice, when you start typing in this textbox, the button becomes enabled and the star image becomes visible. So then it looks like this:

when I start typing in the text box with id="TestTextBox"
I want the masked textbox called id="FormatTextBox" to function just like the text box called id="TestTextBox".

When I start typing in the Masked Textbox the button is not being enabled and the star image isn't displayed.
It seems like the masking is preventing the on input event from firing. Because if I remove the masking from that same textbox then the on input event works fine.:

            $('#FormatTextBox').on('input', function (e) {

                // show image
                $("#Image1").show();

                // enable the button with id of Button1
                $('#Button1').prop('disabled', false);
            });


Anyone know why the on input event on my masked textbox called id="FormatTextBox"  shown on my fiddle above?
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
sounds like it's overwriting it. what happens if you initialize the two events around the other way?
0
maqskywalkerAuthor Commented:
my mistake the correct fiddle is this one.

https://jsfiddle.net/vaLmxzx1/
0
maqskywalkerAuthor Commented:
I'm doing the masking for my textbox called id="FormatTextBox"  like this on the dropdownlist's change event:

            $('#FormatDDL').change(function () {

                // textbox is hidden by default
                // show textbox on change of dddl
                $('#FormatTextBox').show();

                if ($('#FormatDDL option:selected').val() == '1') {
                    // clear value in textbox
                    $('.FormatTextBox').val(""); // clear out the textbox value
                    $(".FormatTextBox").unmask("")
                    $('.FormatTextBox').attr('placeholder', '(###)###-####'); // add placeholder to textbox
                    // 1 - FEIN - Federal Tax Id Number
                    $(".FormatTextBox").mask("(999)999-9999"); // set textbox mask
                } else {                    
                    // clear value in textbox
                    $('.FormatTextBox').val("");
                    $(".FormatTextBox").unmask("")
                    $('.FormatTextBox').attr('placeholder', '###-##-####');
                    // 2 - SSN - Social Security Number
                    $(".FormatTextBox").mask("999-99-9999");
                }


So on the change event of the dropdownlist depending on the item chosen, it applies the masking.

If I remove the masking by commenting out the if else statement doing the masking then the on input event of the textbox fires.
0
RobOwner (Aidellio)Commented:
avoid using the input event.

http://jsbin.com/sulima/1/edit?js,output shows how you can use the keyup event to the same effect
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.