jQuery Maskedinput plugin: Completed event after pasting not work
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: " + t开发者_Python百科his.val());
} });
});
</script>
Anyone done similar?
I ended up:
- binding to the paste event and
- 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
- 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.
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.
精彩评论