This is a migrated thread and some comments may be shown as answers.

Always set the caret at the beginning when field is empty

5 Answers 116 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Michaël
Top achievements
Rank 1
Michaël asked on 18 Apr 2014, 03:25 PM
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!

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 21 Apr 2014, 11:08 AM
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!
 
0
Michaël
Top achievements
Rank 1
answered on 21 Apr 2014, 11:42 AM
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();            });          }        })

0
Kiril Nikolov
Telerik team
answered on 23 Apr 2014, 06:50 AM
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!
 
0
Samuel
Top achievements
Rank 1
answered on 15 Jan 2015, 01:24 PM
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)
           }
       });
0
Kiril Nikolov
Telerik team
answered on 15 Jan 2015, 02:29 PM

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!
 
Tags
MaskedTextBox
Asked by
Michaël
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Michaël
Top achievements
Rank 1
Samuel
Top achievements
Rank 1
Share this question
or