如何在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！ :)