1. Home
  2. Forum
  3. ASP.NET MVC
  4. Hitting backspace at the beginning of Maskedit brings focus to the last position

Hitting backspace at the beginning of Maskedit brings focus to the last position

Hi there, I have a mask edit text box to get phone numbers from the users.

This is how it looks like on my view:

 @Html.EJ().MaskEdit("txtPhoneHome").ReadOnly(disableControls).WatermarkText("Home Phone Number").MaskFormat("999-999-9999").Value(Model.PhoneHome)

Which renders like:



Now please notice that the focus is on the very left-hand side of the input box.
If I press "backspace" on the keyboard, the focus is now on the very right-hand side of the input box.


As a result, if you press and hold on backspace, the focus travels from right to left, without stopping.

How can I prevent this happening so that when the focus is on the very left-hand side, it doesn't go the end position(right side)?




3 Replies
AB Ashokkumar Balasubramanian Syncfusion Team December 22, 2017 12:25 PM UTC

Hi Andrew, 
 
We are able to reproduce the problem at our end. For this scenario we can manually set the cursor position to initial point (“Left Side”) with the help of MaskEdit keyDown event. Please check the below code block 
 
[Script] 
 
function onKeyDown(args) { 
     var maskElement = this.element[0]; 
     if (maskElement.selectionStart == 0 && args.keyCode == 8) { 
             setTimeout(function () { 
                   maskElement.setSelectionRange(0, 0); 
              }, 0); 
       } 
} 
 
For your convenience, we have prepared simple sample, please check the sample in below playground. 
 
 
To know more details about keyDown event, please check the below API document. 
 
 
Note: We have considered this kind of concerns in EJ2 MaskEdit component, So you can use this component instead of using EJ1 MaskEdit, please check the below demos. 
 
 
Please let us know, if the provided information’s are helpful to resovle this problem or not. 
 
Regards, 
Ashokkumar B. 


AJ Andrew Jang December 22, 2017 06:23 PM UTC

Hello Ashokkumar,

Thank you for your reply.
I've tried to use your solution but there is a slight problem.

I've modified my code so that it has keydown event as following:

@Html.EJ().MaskEdit("txtPhoneHome").ClientSideEvents(evt => evt.Keydown("onKeyDown").KeyUp("onKeyDown")).ReadOnly(disableControls).WatermarkText("Home Phone Number").MaskFormat("999-999-9999").Value(Model.PhoneHome)

The problem is that "Keydown" event never gets triggered and so it never reaches the javascript function you gave me.
I've tested a few things, tried "KeyPress", but the same thing, I couldn't get it triggered what-so-ever.
I've tried "KeyUp", and I was able to get the event triggered, which doesn't help me to resolve the issue.

Please note that I am using MVC to build this.




AB Ashokkumar Balasubramanian Syncfusion Team January 2, 2018 12:23 PM UTC

Hi Andrew, 
 
Sorry for the inconvenience caused. 
 
We have validated your query “Hold on backspace, cursor travels from right to left without stopping” and confirmed this as a bug, which will we be resolved in our Vol 1, 2018 release. We have created separate incident under your account for the further follow-up:   
 
 
Please let us know if you have any concern on this.  
 
Regards, 
Soundara Pandian R 


Loader.
Up arrow icon