검도 UI 그리드 열에서 전화 번호 입력을 마스킹하는 방법

Question

우리는 REST 끝점에 바인딩 된 검도 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 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

jQuery 플러그인을 사용해 보셨습니까? 그래서 그냥 포맷 필요로하는 입력에 사용자 정의 클래스를 때리고, 당신은 어떤의 jQuery 셀렉터 플러그인을 결합 할 수

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

하고, 플러그를 연결하기 위해 그것을 사용 : 우리는 직장에서이 하나를 사용하십시오. 이것이 실행 가능한 솔루션인지 확실하지 않지만 과거에 사용한 적이 있습니다. HTH! :)

Answer 3

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]')); 
    } 
}