JQuery Masked Input Plugin doesn't accept paste

Question

First of all, I'm using:

Jquery 1.8.3
Masked Input Plugin 1.3.1 (The plugin can be found here)

My goal:

Mask an input field to accept only 11 numeric digits. However I want it to accept copy and paste in a way that if I copy a text containing only 11 numbers from an external source (e.g text file), the plugin let me paste in the masked input field.

The problem:

When I try to paste for example: 03073870970 (11 numbers), the mask only accepts 030738709 (9 numbers).

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

I would ask to see the code implementing the mask, like `$('#num11').mask()` — Coronus, Jan 24 '13 at 19:46
Sorry for not pasting the code. But I have found a solution already. — jguilhermemv, Jan 24 '13 at 19:57

Demeter Dimitri · Accepted Answer · 2016-06-10T05:55:21.923

12

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(''); });

edited Jun 10 '16 at 05:55

answered Feb 10 '14 at 12:55

Demeter Dimitri

608
8
17

This works as long as you're only pasting in the entire form field value (i.e. you can't type in a few characters and then paste in the rest). – Richard Davies Mar 31 '14 at 19:03
The best use is: $('input.class').bind('paste', function () { $(this).val(''); }); Otherwise, all input with ".class" will be empty. – Silvio Delgado Sep 14 '15 at 02:30
When I do it the normal input (with keyboard) stop working – Jhonatan Pereira Jan 04 '19 at 12:39

score 11 · Answer 2 · answered Jan 24 '13 at 20:01

11

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.

answered Jan 24 '13 at 20:01

jguilhermemv

769
3
11
28

this solution also works for bootstrap jasny input mask. – Bryan Dellinger Jan 10 '17 at 15:29

score 4 · Answer 3 · answered Oct 28 '13 at 08:19

4

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

answered Oct 28 '13 at 08:19

Viktor Podoprigo

51
2

Kaloyan Kosev · Answer 4 · 2014-11-14T13:49:00.023

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);
});

Chris Geirman · Answer 5 · 2013-11-13T00:15:05.357

1

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!

edited Nov 13 '13 at 00:15

answered Nov 13 '13 at 00:08

Chris Geirman

9,474
5
37
70

JQuery Masked Input Plugin doesn't accept paste

5 Answers5