Always set the caret at the beginning when field is empty

6 posts, 0 answers
  1. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 18 Apr 2014 Link to this post

    Hi,

    I'm trying ot use the MaskedTextBox but, as of today, it's simply unusable because it completely destroys user experience. When the field is empty (for example a credit card), if user enter into the field using the mouse, it should put the caret at the beginning of the field (or, if the field is not empty, at the next supposed character). That's not the case right now, if I click in the middle of the field, it places the caret there, and the input cannot be properly field because of the constraint. You can easily reproduce this in any of your demo.

    Is there a way to fix that?

    Thanks!
  2.
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 21 Apr 2014 Link to this post

    Hi Michael,

    This problem should be resolved in the latest build of Kendo UI. Can you reproduce the same issue using our online demos?

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 21 Apr 2014 in reply to Kiril Nikolov Link to this post

    Hi,

    I tried the demo, and the problem is still here. (the demo uses 2014.01.416, not sure if this is the latest build).

    Way to reproduce the issue:

    1. Select for instance the credit card input, and remove the data.
    2. Go back to the field. Exepcted: always put the caret at the beginning. But ti does not.

    Btw, I've solved the issue myself. Here is the on focus method:

    .on("focus" + ns, function() {          that._oldValue = DOMElement.value;
              if (!element.val()) {            caret(element, 0);          } else {            that._timeoutId = setTimeout(function() {              element.select();            });          }        })

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 23 Apr 2014 Link to this post

    Hi Michael,

    The issue has been fixed and the fix will be available with the next internal build of Kendo UI. Here is a reference of the issue:

    https://github.com/telerik/kendo-ui-core/issues/20

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Samuel
    Samuel avatar
    3 posts
    Member since:
    May 2014

    Posted 15 Jan 2015 in reply to Kiril Nikolov Link to this post

    Hi

    For those that cannot update kendo (to not alter a production app maybe) here is how I fixed it:

    I added a onfocus event on the maskedtexebox input :

    $("#themaskedboxid").bind("focus", function () {

               if (this.createTextRange) {
                   var part = this.createTextRange();
                   part.move("character", 0);
                   part.select();
               } else if (this.setSelectionRange) {
                   var maskedinput = this;
                   setTimeout(function () { 
                       maskedinput.setSelectionRange(0, 0);
                   }, 0)
               }
           });
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 15 Jan 2015 Link to this post

    Hello Samuel,

    Thanks for sharing this example with us. I am sure it will be helpful for some of our community members.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top