Bind Change Event Function to All MaskedTextBox Widgets
Environment
Product | Progress® Kendo UI® MaskedTextBox for jQuery |
Product Version | Created with the 2017.3.1026 version |
Description
How can I bind the change
events of all MaskedTextBoxes to a single event handler function?
Solution
To bind all the widgets, utilize any of the following approaches:
After the Page Loads
- After all the MaskedTextBoxes initialize, select them with the jQuery data-role attribute selector.
- Loop through the array and attach the
change
handler to every MaskedTextBox.
<input id="maskedtextbox1" />
<input id="maskedtextbox2" />
<input id="maskedtextbox3" />
<script>
$("input").kendoMaskedTextBox();
var mtbs = $("[data-role='maskedtextbox']");
mtbs.each(function(e) {
var mtb = $(this).data("kendoMaskedTextBox");
mtb.bind("change", SomeFunction);
});
function SomeFunction(e) {
alert(this.value());
}
</script>
Before the Page Loads
Override the default change
event handler function before the MaskedTextBoxes initializes.
<script>
function SomeFunction(e) {
alert(this.value());
};
$.fn.kendoMaskedTextBox.widget.fn._change = SomeFunction
</script>
<input id="maskedtextbox1" />
<input id="maskedtextbox2" />
<input id="maskedtextbox3" />
<script>
$("input").kendoMaskedTextBox();
</script>