jQuery Masked Input插件无法处理表单输入？ [英] jQuery Masked Input plugin not working on form input?

问题描述

我正在尝试在我的某个dataTable上使用蒙面输入插件编辑器字段（#DTE_Field_phone）。出于某种原因，掩码未应用此代码：

I'm trying to use the Masked Input plugin on one of my dataTables Editor fields (#DTE_Field_phone). For some reason, the mask isn't being applied with this code:

$('#DTE_Field_phone').mask('[phone]');

我在表和编辑器初始化之后调用了掩码，但仍然没有。关于我可能做错的任何想法？

I'm calling the mask after the table and editor are initialized, yet still nothing. Any ideas on what I may be doing wrong?

HTML：

<div class="DTE_Field_Input" data-dte-e="input">
    <input id="DTE_Field_phone"></input>
    <div class="DTE_Field_Error" data-dte-e="msg-error" style="display: none;"></div>
    <div class="DTE_Field_Message" data-dte-e="msg-message"></div>
    <div class="DTE_Field_Info" data-dte-e="msg-info"></div>
</div>

jQuery：

jQuery(function ($) {
    $( document ).ready(function (e) {
        var editor = new $.fn.dataTable.Editor({
            "ajaxUrl": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
            "domTable": "#form_results7",
            "fields": [
                { "label": "Contact",
                  "name": "contact",
                  "type": "text" },
                { "label": "Company",
                  "name": "company",
                  "type": "text" },
                { "label": "Email",
                  "name": "email",
                  "type": "text" },
                { "label": "Phone",
                  "name": "phone",
                  "type": "text" },
                { "label": "Fax",
                  "name": "fax",
                  "type": "text" },
                { "label": "Address",
                  "name": "address",
                  "type": "text" },
                { "label": "Tax ID",
                  "name": "tax_id",
                  "type": "text" }
            ]
        });
        $('#add_items').on('click', function (e) {
            e.preventDefault();
            editor.create(
                'Add Contact',
                {
                    "label": "Add",
                    "fn": function () {
                        editor.submit()
                    }
                }
            );
        });
        $('#form_results7').on('click', 'a.editor_edit', function (e) {
            e.preventDefault();
            editor.edit(
                $(this).parents('tr')[0],
                'Edit Contact',
                { "label": "Update", "fn": function () { editor.submit() } }
            );
        });
        $('#form_results7').on('click', 'a.editor_remove', function (e) {
            e.preventDefault();
            editor.message( "Are you sure you want to remove this row?" );
            editor.remove( $(this).parents('tr')[0], 'Delete row', {
                "label": "Confirm",
                "fn": function () { this.submit(); }
            });
        });
        var oTable = $('#form_results7').dataTable({
            "bAutoWidth": false,
            "bJQueryUI": true,
            "sAjaxSource": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
            "sDom": "<'H'lfr>t<'F'ip>",
            "aoColumns": [
                { "mData": "contact",
                  "sWidth": "14%" },
                { "mData": "company",
                  "sWidth": "14%" },
                { "mData": "email",
                  "sWidth": "17%" },
                { "mData": "phone",
                  "sWidth": "11%" },
                { "mData": "fax",
                  "sWidth": "11%" },
                { "mData": "address",
                  "sWidth": "17%" },
                { "mData": "tax_id",
                  "sWidth": "8%" },
                { "bSortable": false,
                  "mData": null,
                  "sClass": "center",
                  "sDefaultContent": '<a href="" class="editor_edit">Edit</a> | <a href="" class="editor_remove">Delete</a>',
                  "sWidth": "8%" }
            ],
            "sPaginationType": "full_numbers"
        });
        $('#DTE_Field_phone').mask("[phone]");
        try {$("#form_results7_length select").msDropDown();} catch(e) {alert(e.message);}
        $('#refresh_items').click(function() {
            location.reload();
        });
        $("#reset").click(function() {
            $("#form_results7_filter input").val("");
            oTable.fnFilter("");
            oTable.fnSort([[ 0, "asc" ]]);
        });
    });
});

推荐答案

我没有dataTables的经验但是从你的代码我认为你正在使用弹出编辑器？
如果是这样你可能需要在编辑器打开后触发的事件中应用掩码：

I have no experience of dataTables but from your code I think you are using the popup editor? If so you probably need to apply the mask in the event which is fired after the editor is opened like this:

editor.on('onOpen', function () {
    $('#DTE_Field_phone').mask('[phone]');
});

这篇关于jQuery Masked Input插件无法处理表单输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！