答案 0 :(得分：33)
如果你想在Knockout中使用优秀的Masked Input Plugin，那么编写一个基本的自定义绑定而不是扩展器非常容易。
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);
}
};
然后在你的HTML中：
<input type="text" data-bind="masked: dateValue, mask: '99/99/9999'" />
<input type="text" data-bind="masked: ssnValue, mask: '999-99-9999'" />
等各种面具。这样，您只需将面罩放在数据绑定中，就可以获得很大的灵活性。
答案 1 :(得分：6)
做得好，米老师。为了使用＆＃34;占位符＆＃34;我把你的代码扩展了一点。 Masked Input Plugin的属性：
ko.bindingHandlers.masked = {
init: function (element, valueAccessor, allBindingsAccessor) {
var mask = allBindingsAccessor().mask || {};
var placeholder = allBindingsAccessor().placeholder;
if (placeholder) {
$(element).mask(mask, { placeholder: placeholder });
} else {
$(element).mask(mask);
}
ko.utils.registerEventHandler(element, "blur", function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).val(value);
}
};
带占位符的HTML：
<input id="DOB" type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', placeholder: 'mm/dd/yyyy', valueUpdate: 'input'"/>
没有占位符的HTML：
<input id="DOB" type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', valueUpdate: 'input'"/>
KO绑定无论如何都可以。
答案 2 :(得分：2)
只需从该链接中的答案中取出代码并将其放入扩展程序（自由编写，可能有错误）
ko.extenders.masked = function(observable, options) {
return ko.computed({
read: function() {
return '$' + this.observable().toFixed(2);
},
write: function(value) {
// Strip out unwanted characters, parse as float, then write the raw data back to the underlying observable
value = parseFloat(value.replace( /[^\.\d]/g , ""));
observable(isNaN(value) ? 0 : value); // Write to underlying storage
}
});
};
编辑：您可能希望将掩码作为选项提供，而不是将其硬编码为USD等
<强>更新 如果你想使用来自riceboyler的答案的面具插件，但你需要扩展器 可以做到
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);
}
答案 3 :(得分：2)
我尝试使用第一个答案，但它无法使用ko.validation插件。我的验证错误未显示。
我想要更直观的ko活页夹。这是我的解决方案。我正在使用jquery.inputmask插件。如果没有输入值，我也会擦除我的viewmodel上的属性。
ko.bindingHandlers.mask = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var mask = valueAccessor() || {};
$(element).inputmask({ "mask": mask, 'autoUnmask': false });
ko.utils.registerEventHandler(element, 'focusout', function () {
var value = $(element).inputmask('unmaskedvalue');
if (!value) {
viewModel[$(element).attr("id")]("");
}
});
}
};
以下是用法：
<input type="text" data-bind="value: FEIN, mask: '99-9999999'" id="FEIN" >
答案 4 :(得分：0)
您可以使用这种自制的解决方案，对我来说非常适合：
My Binding淘汰赛电话受到网络的启发，我添加了一些托管语言并从不同的事件更新。 我也使用这个js库基本上使用：https://plugins.jquery.com/maskedinput/
你可以在我的绑定中看到术语＆＃34; allBindingsAccessor（）。mask＆＃34;这是来自图书馆maskedinput
ko.bindingHandlers.masked = {
init: function (element, valueAccessor, allBindingsAccessor) {
var mask = allBindingsAccessor().mask || {},
getCaretPosition,
setCaretPosition;
// Permet d'obtenir la position du curseur
getCaretPosition = function getCaretPosition(element) {
// Initialise la position
var caretPos = 0, sel;
// IE
if (document.selection) {
// Donne le focus à l'élément
element.focus();
// Afin d'obtenir la position du curseur
sel = document.selection.createRange();
// On place le curseur à 0
sel.moveStart('character', -element.value.length);
caretPos = sel.text.length;
}
// Firefox
else if (element.selectionStart || element.selectionStart === '0') {
caretPos = element.selectionStart;
}
return (caretPos);
};
// Permet de définir la position du curseur en fonction d'une position donnée
setCaretPosition = function setCaretPosition(element, pos) {
var range;
if (element.setSelectionRange) {
element.focus();
element.setSelectionRange(pos, pos);
}
else if (element.createTextRange) {
range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
// Définition du masque inséré dans le champ
if (configSvc.culture === "fr-FR") {
// Cas francais
$(element).mask("99/99/9999", { placeholder: "JJ/MM/AAAA" });
}
else {
// Cas anglophone
$(element).mask("99/99/9999", { placeholder: "MM/DD/YYYY" });
}
// On capte l'événement d'appuie sur une touche
ko.utils.registerEventHandler(element, 'keypress', function () {
var observable = valueAccessor(),
position;
// Afin de résoudre le pb de déplacement du curseur a la fin du mask lors de la mise à jour de l'observable knockout
if ($(element).val().length === 10) {
// On récupère la dernière position
position = getCaretPosition(this);
// On met à jour la valeur de l'obersable (en cas de sauvegarde)
observable($(element).val());
// On force la position du curseur apres mise à jour de l'observable à la derniere position récupéré
setCaretPosition(this, position);
}
});
// On capte l'événement de perte de focus pour mettre l'obersable à jour
ko.utils.registerEventHandler(element, 'blur', function () {
var observable = valueAccessor();
observable($(element).val());
});
// On capte l'événement change pour mettre l'obersable à jour
ko.utils.registerEventHandler(element, 'change', function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).val(value);
}
};
在我的html页面中，我使用了这个可观察的＆＃34;蒙面＆＃34; ：
<input type="text" id="head-birthDate" class="form-control" data-bind="masked: birthDate" />
最后在我的js：
birthDate只是一个可观察的
this.birthDate = ko.observable();