有没有使用扩展器的knockout.js的屏蔽输入插件？
有没有使用扩展器的knockout.js的屏蔽输入插件？
提问于 2012-11-28 19:33:17
回答 4
Stack Overflow用户
回答已采纳
发布于 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'" />以此类推，有各种各样的面具。这样，您就可以将掩码正确地放入数据绑定中，并且它允许大量的灵活性。
Stack Overflow用户
发布于 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绑定都可以工作。
Stack Overflow用户
发布于 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" >页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13604103
复制相关文章
相似问题