admin管理员组

文章数量:1025289

Set jquery mask on a dynamically inserted input?

I'm trying to do it in the down format, but I'm not succeeding.

The new input loses the mask.

Can someone help me with this please.?

<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>

.

 $(document).ready(function(){
        $('.valor').mask("#.##0,00", {reverse: true});
    });

.

$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})

Set jquery mask on a dynamically inserted input?

I'm trying to do it in the down format, but I'm not succeeding.

The new input loses the mask.

Can someone help me with this please.?

<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>

.

 $(document).ready(function(){
        $('.valor').mask("#.##0,00", {reverse: true});
    });

.

$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})
  • javascript
  • jquery
  • html
  • jquery-mask
Share Improve this question asked Feb 18, 2019 at 19:19 marcelo.deltamarcelo.delta 3,1027 gold badges46 silver badges82 bronze badges 1
  • Worked perfectly. Thank you very much – marcelo.delta Commented Feb 18, 2019 at 20:34
Add a ment  | 

3 Answers 3

Reset to default 4

set the mask on focus of the input like this

$(document).on("focus", ".valor", function() { 
    $(this).mask("#.##0,00", {reverse: true});
  });

you can probably remove it from document.ready function and also instead of cloning and appending in 2 lines you can shorten it to 1 line with this

$('.control:last').after($('.control:last').clone());

here is a working fiddle https://jsfiddle/tv7w3Lku/3/

Side note: cloning an element with ID will create multiple elements with same ID which is probably not the best way, you should just stick with class in this case

Just recall your mask function after each input is added to the DOM.

$(document).on('click', '#addItem', function () {
     var newElement = $('.control:last').clone(true);
     $('.control:last').after(newElement);
      $('.valor').mask("#.##0,00", {reverse: true});
})

I was having this same problem, and discovered the .masked() function will apply the mask to a dynamic value. Hope this helps:

HTML:

<input name="phone" type="text">

<button>insert dynamic value</button>

JS:

$(function(){
    $("input[name='phone']").mask("(000) 000-0000");
});

$("button").click(function(){
    newPhoneNumber = "1231231234";
    maskedValue = $("input[name='phone']").masked(newPhoneNumber));
    $("input[name='phone']").val(maskedValue);
});

fiddle: https://jsfiddle/qcsf3z0j/4/

and docs: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#getting-a-masked-value-programmatically

Set jquery mask on a dynamically inserted input?

I'm trying to do it in the down format, but I'm not succeeding.

The new input loses the mask.

Can someone help me with this please.?

<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>

.

 $(document).ready(function(){
        $('.valor').mask("#.##0,00", {reverse: true});
    });

.

$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})

Set jquery mask on a dynamically inserted input?

I'm trying to do it in the down format, but I'm not succeeding.

The new input loses the mask.

Can someone help me with this please.?

<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>

.

 $(document).ready(function(){
        $('.valor').mask("#.##0,00", {reverse: true});
    });

.

$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})
  • javascript
  • jquery
  • html
  • jquery-mask
Share Improve this question asked Feb 18, 2019 at 19:19 marcelo.deltamarcelo.delta 3,1027 gold badges46 silver badges82 bronze badges 1
  • Worked perfectly. Thank you very much – marcelo.delta Commented Feb 18, 2019 at 20:34
Add a ment  | 

3 Answers 3

Reset to default 4

set the mask on focus of the input like this

$(document).on("focus", ".valor", function() { 
    $(this).mask("#.##0,00", {reverse: true});
  });

you can probably remove it from document.ready function and also instead of cloning and appending in 2 lines you can shorten it to 1 line with this

$('.control:last').after($('.control:last').clone());

here is a working fiddle https://jsfiddle/tv7w3Lku/3/

Side note: cloning an element with ID will create multiple elements with same ID which is probably not the best way, you should just stick with class in this case

Just recall your mask function after each input is added to the DOM.

$(document).on('click', '#addItem', function () {
     var newElement = $('.control:last').clone(true);
     $('.control:last').after(newElement);
      $('.valor').mask("#.##0,00", {reverse: true});
})

I was having this same problem, and discovered the .masked() function will apply the mask to a dynamic value. Hope this helps:

HTML:

<input name="phone" type="text">

<button>insert dynamic value</button>

JS:

$(function(){
    $("input[name='phone']").mask("(000) 000-0000");
});

$("button").click(function(){
    newPhoneNumber = "1231231234";
    maskedValue = $("input[name='phone']").masked(newPhoneNumber));
    $("input[name='phone']").val(maskedValue);
});

fiddle: https://jsfiddle/qcsf3z0j/4/

and docs: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#getting-a-masked-value-programmatically

本文标签：

版权声明：本文标题：javascript - Set jquery mask on a dynamically inserted input? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745538461a2155069.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。