1

I have trouble with using jQuery Masked Input Plugin text typing successfully works, but if I paste text into masked textbox - I cannot catching Completed event.

Example from plugin site:

<script type="text/javascript">

    jQuery(function ($) {
         $("#testtext").mask("99/99/9999", { completed: function () {
             alert("You typed the following: " + this.val());
         } });
     });
</script>

Anyone done similar?

Mikka
  • 67
  • 2
  • 7

2 Answers2

4

I ended up:

  1. binding to the paste event and
  2. then getting the pasted val()-ue after a brief setTimeout (since pasted data doesn't make it into the control when event is triggered) and
  3. finally invoking the same method as complete 
// mask fields
$('#Ssn').mask("999-99-9999",
    { completed: function () { lookupPersonAsync(this.val()); } }
);
// fix paste bug
$('#Ssn').bind('paste', function () {
    setTimeout(function () {
        var ssn = $('#Ssn').val();
        if (ssn.length == 11) lookupPersonAsync(ssn);
    }, 100);
});

There might be a simpler solution, but this seemed simplest since it turns out it's not that easy to get to clipboard data in all browsers.

d3vtoolsmith
  • 151
  • 1
  • 10
0

Here is what I did to trigger the Completed event upon pasting. It might not be the pretties solution, or fool-proof by any means, but for my purposes, it will suffice.

Also with the limited testing that I did with 2 seperate masks, I didn't encounter any problems. The masks I used were aa99aaa999 and (999) 999-9999.

I simply updated the bind event of the paste handler. All this logic does is ensures that the position of the cursor is >= the length of the mask, and if that is the case, it will trigger the completed function, assuming you have passed it.

.bind(pasteEventName, function() {
                        setTimeout(function() { 
                            input.caret(checkVal(true)); 
                            if(checkVal(true) >= len && settings.completed){
                                settings.completed.call(input);
                            }
                        }, 0);

Hope this helps someone out.

xBoarder
  • 106
  • 2
  • 5