New to Kendo UI for jQuery? Download free 30-day trial

Add Keyup Event to TextBox

Environment

Product Progress Kendo UI TextBox
Progress Kendo UI 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>
In this article