Есть ли замаскированный плагин ввода для нокаута.js использует расширители?
Я видел этот в должности - он показывает одно возможное решение. Но я хотел бы иметь более элегантный способ делать замаскированный ввод.
Он также должен хорошо играть с плагином проверки нокаута (или, возможно, его расширения).
кто-нибудь знает, как существует подобный проект?
5 ответов
Если вы хотите использовать отличный Маскированный Плагин Ввода в нокауте довольно легко написать базовую пользовательскую привязку, а не расширитель.
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'" />
и так далее с различными масками. Таким образом, вы можете просто поместить маску прямо в свою привязку данных, и это обеспечивает тонну гибкости.
молодец, riceboyler. Я взял ваш код и немного расширил его, чтобы использовать свойство "placeholder" плагина Masked Input:
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 работает в любом случае.
просто возьмите код из ответа в этой ссылке и поместите его в расширитель (написано свободной рукой, могут быть ошибки)
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
}
});
};
edit: вы, вероятно, хотите предоставить маску в качестве опции, а не жестко закодировать ее в 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);
}
Я попытался использовать первый ответ, но он не работал с ko.проверка подключается. Мои ошибки проверки не отображались.
Я хотел иметь немного более интуитивный ko binder. Вот мое решение. Я использую jquery.свойство маска ввода подключить. Я также уничтожаю свойство на моей 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" >
вы можете использовать это домашнее решение, отлично работает для меня:
мой привязка нокаут вызова маскируется вдохновил из сети, я добавил некоторые управляемый язык и обновление из другого события. Также я использую эту библиотеку js для использования в основном:https://plugins.jquery.com/maskedinput/
вы можете увидеть в моей привязке термин " allBindingsAccessor ().маска " это из библиотеки 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-странице Я использую это наблюдаемое "в маске":
<input type="text" id="head-birthDate" class="form-control" data-bind="masked: birthDate" />
наконец-то в моем js:
дата рождения просто наблюдаемая
this.birthDate = ko.observable();