knockout.js 输入前电话掩码不起作用

klr1opcd  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(171)

我有一个手机引导文本框。在我点击文本框后,我可以看到掩码,但我想看到掩码,只要我打开模态。
注:自.房状态在添加掩码后停止工作。
加载

单击

  1. ko.extenders.mask = function (observable, mask) {
  2. observable.mask = mask;
  3. return observable;
  4. }
  5. var orgValueInit = ko.bindingHandlers.value.init;
  6. ko.bindingHandlers.value.init = function (element, valueAccessor) {
  7. var mask = valueAccessor().mask;
  8. if (mask) {
  9. $(element).mask(mask);
  10. }
  11. orgValueInit.apply(this, arguments);
  12. }
  13. function ViewModel() {
  14. self.cellPhone = ko.observable().extend({
  15. required: true,
  16. mask: "(999) 999-9999"
  17. });
  18. self.getCellPhoneNumberForAgent = function () {
  19. var cellPhone = "";
  20. var responseFromGetCellPhoneNumber = $.getJSON('GetCellPhoneNumberForAgent', function (cellPhoneResponse) {
  21. cellPhone = cellPhoneResponse;
  22. }).done(function () {
  23. var cellPhoneNumberForAgent = $.parseJSON(cellPhone);
  24. self.cellPhone(cellPhoneNumberForAgent);
  25. });
  26. };
  27. self.getCellPhoneNumberForAgent();
  28. //This is not working after adding mask code.
  29. self.EStates = ko.observableArray([]);
  30. $.getJSON('GetEStates', function (data) {
  31. var result = $.parseJSON(data);
  32. $.each(result, function (key, value) {
  33. var name = value;
  34. var state = new eligibleState(name, false);
  35. self.EStates.push(state);
  36. });
  37. });
  38. }
jrcvhitl

jrcvhitl1#

jQuery mask并不是真正设计用来处理编程更新的值的,您需要调用unmask,然后在每次更新时再次应用掩码。
第一个

u0njafvf

u0njafvf2#

  1. ko.bindingHandlers.masked = {
  2. init: function (element, valueAccessor, allBindingsAccessor) {
  3. var mask = allBindingsAccessor().mask || {};
  4. $(element).mask(mask);
  5. ko.utils.registerEventHandler(element, 'focusout', function () {
  6. var observable = valueAccessor();
  7. observable($(element).val());
  8. });
  9. },
  10. update: function (element, valueAccessor) {
  11. var value = ko.utils.unwrapObservable(valueAccessor());
  12. $(element).val(value);
  13. $(element).trigger('blur');//to show the mask on pageload.
  14. }
  15. };
  16. <input data-bind="value: contactPhone, masked: contactPhone, mask: '(999) 999-9999'" type="text" class="form-control">

相关问题