Warm tip: This article is reproduced from serverfault.com, please click

knockout.js-键入之前,“电话蒙版”不起作用

(knockout.js - Phone Mask does not work before typing)

发布于 2015-11-24 16:02:42

我有一个手机引导程序文本框。单击文本框后,我可以看到该蒙版,但是我想在打开模态后立即看到该蒙版。

注意:self.EStates在添加蒙版后停止苏醒。

负载 在此处输入图片说明

点击后 在此处输入图片说明

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);
            });
        });
}
Questioner
Nakres
Viewed
0
Roy J 2015-11-25 00:46:29

jQuery mask并不是为处理以编程方式更新的值而设计的。你需要致电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" />