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

Question

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

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

1) 用户点击电话号码单元格。 2) 用户输入 1234567890。 3) 离开小区时，格式改为(123) 456-7890。

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

我们还研究了使用在每个单元格的更改事件上调用的 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 事件那样挣扎。 p>

感谢 James 的提示，我最终使用了 Masked Input jQuery plugin 并使用 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 选择器，因此只需在需要格式化的输入上添加一个自定义类，然后使用它来连接插件。不确定这是否是一个可行的解决方案，但这是我过去使用过的。 ！ :)