Add Keyup Event to TextBox
Environment
Product | Progress® Kendo UI® TextBox for jQuery |
Product Version | Created with the 2022.1.119 version |
Description
How can I extend the TextBox functionality to add a keyup
event?
Solution
The following example demonstrates how to extend the current TextBox functionality by creating your own widget and add a keyup event.
<input id="myTextBox" style="width: 20%" />
<script>
var textboxPlugin = (function (init) {
return kendo.ui.TextBox.extend({
init: function (element, options) {
var that = this;
// The base call to initialize the widget.
init.call(that, element, options);
that.element.on("keyup", $.proxy(that._keyup, that));
},
options: {
name: "TextBox",
autoBind: true
},
events: ["keyup"],
_keyup: function () {
var that = this;
that.trigger("keyup")
}
});
})(kendo.ui.TextBox.fn.init);
kendo.ui.plugin(textboxPlugin);
$(function () {
var textbox = $("#myTextBox").kendoTextBox({
keyup: function (e) {
alert("Hello");
}
});
});
</script>