jquery.inputmask.Bundle.js duplicating the pressed characters

Question

I’m using inputmask for the mask of CEP 99999-999 and after the object is cloned, there is the duplicity of character pressed. It usually occurs when it arrives at the separator (-). Ex. If I type a ZIP code 12345-678, the value is 12345-566, after the separator, the values are duplicated. If I delete the characters and start typing again, the values are 11223-344.

Basically the code I’m using to duplicate the field is:

$('#clonar').click(function(){
    $(this).parent().find('.cep').clone(true).appendTo('#ceps').val('');
});

I made a jsfiddle with the example. To run the 'problem' just type any zip code, click on clone, and then type the zip code to see the duplicity.

Could someone help me on this issue?

Answer 1

Apply the mask only when the element receives the focus, and put false in the option of clone(), so that it does not duplicate the events (by the way, leaves no option, because false is already the default option):

$(document).on('focus', '.cep', function(){
   $(this).inputmask('99999-999');
});

See example:

$(document).on('focus', '.cep', function(){
  $(this).inputmask('99999-999');
})
$('#clonar').click(function(){
        $(this).parent().find('.cep').clone().appendTo('#ceps').val('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<div>
  <input type="text" val="" class="cep"/>
  <button id="clonar">
    Clonar
  </button>
</div>

<div id="ceps">

</div>