发布于 2013-04-10 21:15:01
如果您想在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'" />
以此类推,有各种各样的面具。这样,您就可以将掩码正确地放入数据绑定中,并且它允许大量的灵活性。
发布于 2015-05-12 05:55:37
干得好,博伊勒。我采用了您的代码并对其进行了扩展,以便使用屏蔽输入插件的“占位符”属性:
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绑定都可以工作。
发布于 2013-06-15 00:25:24
我尝试使用第一个答案,但它不适用于ko.validation插件。未显示我的验证错误。
我想要更直观一点的ko活页夹。这是我的解决方案。我正在使用jquery.inputmask插件。如果没有输入值,我也会清除视图模型上的属性。
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" >
https://stackoverflow.com/questions/13604103
复制相似问题