Clever Geek Handbook

JQuery Masked Input Plugin does not accept insert

First of all, I am using:

  • JQuery 1.8.3
  • Masked Input Plugin 1.3.1 (plugin can be found here )

My goal:

  • Customize the input field to accept only 11 numeric digits. However, I want it to accept copy and paste in such a way that if I copy a text containing only 11 numbers from an external source (like a text file) the plugin allows me to paste into a hidden input field.

Problem:

  • When I try to insert for example: 03073870970 (11 numbers), only the mask takes 030738709 (9 numbers).

What should I do to fix this problem? Any advice is appreciated.

+3


source to share


5 answers


You don't need to change your plugin. You can bind the insert event and clear the content just before insert. This way the mask will not contain any spaces so that you cannot make your paste.



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


source


Decision:

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



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

The trick is that if you put any placeholder on an empty line, the plugin fills the input with the placeholder and when you insert something it doesn't clear it before inserting whatever you are trying to insert.

+8


source


Another solution: remove the maxlength attribute from your input. the plugin will cut the extra characters, but you should be able to paste correctly from the clipboard.

+4


source


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

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

Works like a charm :)

Another 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);
});
+2


source


Try Formatter.js . I switched to this reason. Another reason was the poor UX surrounding incomplete fields. When I go from one window to another to get a phone number, for example, I could add three numbers, change windows to get the rest of the number, and then return, but the masked input plugin clears the field every time I change windows. Disappointing UX!

+1


source






More articles:


All Articles