如何在Kendo UI网格列中屏蔽电话号码输入

Question

我们正在研究绑定到REST端点的Kendo UI网格。 消息传递部分运行良好。

我们遇到麻烦的地方是尝试屏蔽电话号码输入。 我们喜欢以下行为：

1）用户单击进入电话号码单元格。 2）用户输入1234567890。3）离开单元格时，格式更改为（123）456-7890。

我们已经研究了自定义格式。 那些似乎是日期/时间和数字。 我还没有找到对字符串列进行自定义格式的方法。

我们还研究了如何使用在每个单元格的change事件上调用的formatPhoneNumber函数。 尽管确实可行，但我对这种方法并不满意。

这是网格的基本代码。 我只想找到一种方法来包含自定义格式，或者在定义列或字段属性时绑定到函数。

EditGridConfig = function() {
    var self = this;

    self.gridConfig = {
        columns: [
            { field: 'PhoneNumber', title: 'Phone Number', width: '150px' },
        ],
        data: [],
        toolbar: [
            { name: "save" },
            { name: "cancel" }
        ],
        dataSource: {
            type: "json",
            transport: {
                read: "/api/BusinessEntity",
                update: {
                    url: function(parent) {
                        return "/api/BusinessEntity/" + parent.Id;
                    },
                    dataType: "json",
                    type: "PUT"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        PhoneNumber: { type: "string" },
                    }
                }
            }
        },
        editable: "incell"
    };

    self.selectedData = ko.observable();
};

这是change事件和formatPhoneNumber函数，我们用于获取焦点离开单元格时要格式化的电话号码。 我只是对这种方法不满意，正在寻找一种“清洁”的方法。

change: function (e) {
    if (e.field == "PhoneNumber") {
        console.log('before' + e.items[0].PhoneNumber);
        e.items[0].PhoneNumber = formatPhoneNumber(e.items[0].PhoneNumber);
        console.log('after' + e.items[0].PhoneNumber);
    }
}

function formatPhoneNumber(number) {
    return number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}

非常感谢您的任何建议！

Answer 1

对不起，回答我自己的问题 。 我以为我会在@James McConnell的回答中添加更多细节， 以便其他人不会像我试图用.mask函数连接jQuery.on事件那样挣扎 。

感谢James的提示，我结束了使用Masked Input jQuery插件并使用jQuery.on连接到动态创建的事件。

这是我编写的辅助函数（例如，经过简化）：

applyDynamicInputMask = function(container, selector, event, mask) {
    $(container).on(event, selector, function() {
        var $this = $(this);
        $this.mask(mask);
    });
};

并称之为：

applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");

Answer 2

edit: function (e) {
    //if edit click
    if (!e.model.isNew()) {
        $('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
        //init mask widget
        kendo.init($('input[name=Time]'));
    }
}

Answer 3

您是否尝试过jQuery插件？ 我们在工作中使用这个：

http://digitalbush.com/projects/masked-input-plugin/

您可以将插件绑定到任何jQuery选择器，因此只需在需要格式化的输入上拍一个自定义类，然后使用它来连接插件。 不确定这是否是可行的解决方案，但这是我过去使用的解决方案。 HTH！ :)