CODEWITHSUNDEEP
jquerymaskedinput
jguilhermemv
jguilhermemv

Reputation: 779

JQuery Masked Input Plugin doesn't accept paste

First of all, I'm using:

My goal:

The problem:

What should I do to solve this? Any tips are welcome.

Upvotes: 5

Views: 13590

Answers (5)

Demeter Dimitri
Demeter Dimitri

Reputation: 618

You dont need to change your plugin. You could bind paste event and clear the content just before the paste. So the mask wont be keeping any spaces to prevent you from making your paste.

$('input.class').bind('paste', function () { $(this).val(''); });

Upvotes: 13

Kaloyan Kosev
Kaloyan Kosev

Reputation: 13067

Had the same issue, the most painless solution I found, without removing anything (placeholders, etc) is:

$('input[placeholder]').on('paste', function(){
    $(this).val(' ');
});

Works as a charm :)

One more solution I found:

$('input[placeholder]').on('paste', function(e){
    e.preventDefault();
    var clipboardCurrentData = (e.originalEvent || e).clipboardData.getData('text/plain');
    window.document.execCommand('insertText', false, clipboardCurrentData);
});

Upvotes: 2

Chris Geirman
Chris Geirman

Reputation: 9684

Try Formatter.js instead. I switched for this exact reason. Another reason was bad UX surrounding incomplete fields. When I go from one window to another to get a phone number, for instance, I might add three numbers, change windows to get the rest of the number, then return, but the masked input plugin clears the field each time I change windows. Frustrating UX!

Upvotes: 1

Viktor Podoprigo
Viktor Podoprigo

Reputation: 51

Another solution: remove maxlength attribute from your input. plugin cuts extra symbols itself, but you will be able to paste from buffer correctly.

Upvotes: 4

jguilhermemv
jguilhermemv

Reputation: 779

Solution:

Change the placeholder from "_" or " " or any other placeholder to "" (empty string), as below:

$(".cpfInput").mask("99999999999",{placeholder:""});

The trick is that if you put any placeholder different of an empty string, the plugin will fill the input field with the placeholder and when you paste something it doesn't clean it before pasting whatever you're trying to paste.

Upvotes: 11

Related Questions