Телефонная маска не работает до ввода

Question

У меня есть текстовое поле для ботинка для мобильного телефона. После того, как я нажму на текстовое поле, я могу увидеть маску, но мне хотелось бы увидеть маску, как только я открою модальный.

примечание: self.EStates stop woking после добавления маски.

OnLoad

после нажатия

ko.extenders.mask = function (observable, mask) { 
     observable.mask = mask; 
     return observable; 
    } 


    var orgValueInit = ko.bindingHandlers.value.init; 
    ko.bindingHandlers.value.init = function (element, valueAccessor) { 
     var mask = valueAccessor().mask; 
     if (mask) { 
      $(element).mask(mask); 
     } 

     orgValueInit.apply(this, arguments); 
    } 

function ViewModel() { 
self.cellPhone = ko.observable().extend({ 
      required: true, 
      mask: "(999) 999-9999" 
     }); 

    self.getCellPhoneNumberForAgent = function() { 
      var cellPhone = ""; 
      var responseFromGetCellPhoneNumber = $.getJSON('GetCellPhoneNumberForAgent', function (cellPhoneResponse) { 
       cellPhone = cellPhoneResponse; 
      }).done(function() { 
       var cellPhoneNumberForAgent = $.parseJSON(cellPhone); 
       self.cellPhone(cellPhoneNumberForAgent); 
      }); 
     }; 
     self.getCellPhoneNumberForAgent(); 


    //This is not working after adding mask code. 
    self.EStates = ko.observableArray([]); 
     $.getJSON('GetEStates', function (data) { 
      var result = $.parseJSON(data); 
      $.each(result, function (key, value) { 
       var name = value; 
       var state = new eligibleState(name, false); 
       self.EStates.push(state); 
      }); 
     }); 
} 

Answer 1

JQuery маска не очень предназначен для обработки программно обновленные значения. Вам нужно позвонить unmask, а затем применить маску снова при каждом обновлении.

ko.extenders.mask = function(observable, mask) { 
 
    observable.mask = mask; 
 
    return observable; 
 
}; 
 

 
var origValueUpdate = ko.bindingHandlers.value.update; 
 
ko.bindingHandlers.value.update = function(element, valueAccessor) { 
 
    var val = valueAccessor(), 
 
    mask = val.mask, 
 
    newValue = val(); // Just so it knows when to update 
 
    $(element).unmask(); 
 
    origValueUpdate.apply(this, arguments); 
 
    if (mask) 
 
    $(element).mask(mask); 
 
}; 
 

 
function ViewModel() { 
 
    var self = this; 
 
    self.cellPhone = ko.observable().extend({ 
 
    required: true, 
 
    mask: "(999) 999-9999" 
 
    }); 
 

 
    self.cellPhone("1112223333"); 
 
} 
 

 
var vm = new ViewModel(); 
 
ko.applyBindings(vm); 
 

 
setTimeout(function() { 
 
    vm.cellPhone("2223334444"); 
 
}, 1500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input data-bind="value:cellPhone" />

Answer 2

ko.bindingHandlers.masked = { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      var mask = allBindingsAccessor().mask || {}; 
      $(element).mask(mask); 
      ko.utils.registerEventHandler(element, 'focusout', function() { 
       var observable = valueAccessor(); 
       observable($(element).val()); 
      }); 
     }, 
     update: function (element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      $(element).val(value); 
      $(element).trigger('blur');//to show the mask on pageload. 
     } 
    }; 



<input data-bind="value: contactPhone, masked: contactPhone, mask: '(999) 999-9999'" type="text" class="form-control">