Always set the caret at the beginning when field is empty

[Michaël]

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!

[Kiril Nikolov]

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

 

 

[Michaël]

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();            });          }        })

[Kiril Nikolov]

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

 

 

[Samuel]

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)
           }
       });

[Kiril Nikolov]

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