Question

我有一个手机引导文本框。点击文本框后，我可以看到面具但我想在打开模态后立即看到面具。

注意：self.EStates在添加蒙版后停止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，然后在每次更新时再次应用掩码。

＆＃13;

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);

＆＃13;

<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" />

＆＃13;

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">

键入之前电话掩码不起作用

2 个答案: