Is There Masked Input Plugin For Knockout.js Using Extenders?
Solution 1:
If you wanted to use the excellent Masked Input Plugin in Knockout, it's pretty easy to write a basic custom binding rather than an extender.
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);
}
};
And then in your HTML:
<inputtype="text" data-bind="masked: dateValue, mask: '99/99/9999'" />
<inputtype="text" data-bind="masked: ssnValue, mask: '999-99-9999'" />
And so on with various masks. This way, you can just put the mask right in your databinding, and it allows a ton of flexibility.
Solution 2:
Well done, riceboyler. I took your code and extended it a little in order to use the "placeholder" property of the 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 with placeholder:
<inputid="DOB"type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', placeholder: 'mm/dd/yyyy', valueUpdate: 'input'"/>
HTML without placeholder:
<inputid="DOB"type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', valueUpdate: 'input'"/>
The KO binding works either way.
Solution 3:
Just take the code from the answer in that link and put it in a extender (Written on free hand, can have errors)
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: You probably want to supply the mask as a options instead of having it hardcoded to USD etc
update: If you want to use the mask plugin from riceboyler's answer but with extenders you can do
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);
}
Solution 4:
I tried to use the first answer but it did not work with ko.validation plug in. My validation errors were not being displayed.
I wanted to have little bit more intuitive ko binder. Here is my solution. I am using jquery.inputmask plug in. I also wipe out the property on my viewmodel if not value entered.
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")]("");
}
});
}
};
Here is the usage:
<inputtype="text" data-bind="value: FEIN, mask: '99-9999999'"id="FEIN" >
Solution 5:
You can use this homemade solution, work perfectly for me:
My Binding knockout call masked inspired from the net, i added some managed language and update from different event. Also I use this js library for using basically : https://plugins.jquery.com/maskedinput/
You can see in my binding the term "allBindingsAccessor().mask" this is from the library maskedinput
ko.bindingHandlers.masked = {
init: function (element, valueAccessor, allBindingsAccessor) {
var mask = allBindingsAccessor().mask || {},
getCaretPosition,
setCaretPosition;
// Permet d'obtenir la position du curseur
getCaretPosition = functiongetCaretPosition(element) {
// Initialise la positionvar 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 elseif (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 = functionsetCaretPosition(element, pos) {
var range;
if (element.setSelectionRange) {
element.focus();
element.setSelectionRange(pos, pos);
}
elseif (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 champif (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 knockoutif ($(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);
}
};
in my html page, i use this observable "masked" :
<inputtype="text"id="head-birthDate"class="form-control" data-bind="masked: birthDate" />
Finally in my js :
birthDate is just an observable
this.birthDate = ko.observable();
Post a Comment for "Is There Masked Input Plugin For Knockout.js Using Extenders?"