MaskedTextBox Change Event Not Firing

4 posts, 0 answers
  1. Tracy
    Tracy avatar
    12 posts
    Member since:
    Aug 2014

    Posted 04 Jan Link to this post

    The change event doesn't actual change when you change the value; it only fires when the control loses focus.

    Even on the Telerik Demo, it only updates the log box when you click off of the control.

    How do I make it fire when I am typing in the control itself?

  2. Patrick
    Admin
    Patrick avatar
    203 posts

    Posted 04 Jan Link to this post

    Hello Tracy,

    The behavior you described is by-design, but if you would like to use the change event every time you type, one approach you can use is trigger the change event on the jQuery keydown event.
    $(document).ready(function() {
      function onChange() {
        console.log("changed!");
      }
     
      $("#maskedtextbox").kendoMaskedTextBox({
        mask: "(999) 000-0000",
        change: onChange
      });
       
      $("#maskedtextbox").keydown(function() {
        var maskedTextBox = $("#maskedtextbox").data("kendoMaskedTextBox");
        maskedTextBox.trigger('change');
      })
     
    });

    For clarification, please take a look at this Kendo UI Dojo by Progress which demonstrates the approach above.

    Please be aware, however, there are some limitations to using the keydown event using mobile editing.  

    I hope this helps!

    Regards,
    Patrick
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tracy
    Tracy avatar
    12 posts
    Member since:
    Aug 2014

    Posted 04 Jan Link to this post

    I actually found it better to use the keyup jquery event because it captures the backspace/delete key as well.

    Thanks for the update!

  4. Patrick
    Admin
    Patrick avatar
    203 posts

    Posted 04 Jan Link to this post

    Hello Tracy,

    Glad everything is working, and happy to help!

    Regards,
    Patrick
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top