使用 jquery 掩码添加输入答案

【问题标题】：Add input with jquery mask使用 jquery 掩码添加输入
【发布时间】：2020-05-06 01:40:00
【问题描述】：

大家好，我在下面有这个脚本正在添加输入，但我无法插入掩码。我正在使用的插件 https://github.com/igorescobar/jQuery-Mask-Plugin

在第一个字段中，掩码正在运行，添加时不添加掩码。

可以帮忙吗？

<script type="text/javascript">
$(document).ready(function() {
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
            $(wrapper).append("<div><input type=\"text\" name=\"mytext[]\" id=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove();
    })
});    
</script>

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]" id="date"></div>
</div>
<script type="text/javascript">
    $('#date').mask('00/00/0000');
</script>

【问题讨论】：

标签： jquery mask

【解决方案1】：

首先更改 id 选择器 #date class .date 因为您不能有多个具有相同 id 的元素。

您需要在$(document).ready(function() {}) 方法中移动$('.date').mask('00/00/0000');。

第三件事，您必须将掩码绑定到新创建的输入元素。以下是修改上述建议更改后的工作代码副本。

    <script type="text/javascript">
    $(document).ready(function () {
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            $(wrapper).append("<div><input type=\"text\" name=\"mytext[]\" class=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
            $('.date').mask('00/00/0000');
        });

        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault();
            $(this).parent('div').remove();
        })
        $('.date').mask('00/00/0000');
    });
</script>

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]" class="date"></div>
</div>
<script type="text/javascript">
    $('#date').mask('00/00/0000');
</script>

【讨论】：

随时@Conseld

【解决方案2】：

在$(document).ready(function() {}) 中添加$('#date').mask('00/00/0000'); 因为当您在这样的脚本块中运行它时，不能保证文档已经完成加载。多科：https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

【讨论】：

【解决方案3】：

稍微清理一下。

var wrapper = $(".input_fields_wrap");
var button = $(".add_field_button");
var input = $("#date");

button.click(function (e) {
    e.preventDefault();
    wrapper.append("<div><input type=\"text\" name=\"mytext[]\" id=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
});

wrapper.on("click", ".remove_field", function (e) {
    e.preventDefault();
    $(this).parent('div').remove();
})

input.mask('00/00/0000');

【讨论】：