33333

[beach blah]

How do I move the cursor within the maskedit input. I've tried the following...

<button type="button" (click)="moveCursor(maskEdit)" />

<input #maskedit ej-maskedit name="mecode" [(ngModel)] (focus)="moveCursor(maskedit)" />

moveCursor(input) {

     input.el.nativeElement.setSelectionRange(0,0);

     input.el.nativeElement.focus();

}

or

<input #maskedit ej-maskedit name="mecode" [(ngModel)] (focus)="moveCursor($event)" />

moveCursor(event) {

     event.target.setSelectionRange(0,0);

     event.target.focus();

}

[Ashokkumar Balasubramanian]

Hi Beach, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your requirement and provided code block. In that code block, you have tried to move the MaskEdit Textbox cursor to beginning of the text, but unfortunately you are unable to achieve it. You can achieve your requirement by using “focusIn” event of MaskEdit component. Please check the below code snippet.  

 

[Html] 

 

<input ej-maskedit id="mask" name="mecode" [(ngModel)]="newContactMethod.phoneNumber" maskFormat='(999) 999-99999' (focusIn)="moveCursor(maskedit)" /> 

 

[Script] 

 

moveCursor(){ 

       var maskObj= $("#mask").ejMaskEdit("instance"); 

       var maskInput = maskObj._textbox; 

       setTimeout(function(){   

                maskInput.setSelectionRange(0,0 )  

       });  

   } 

 

For your convenience, we have prepared simple sample, please check the sample in below location. 

 

Sample. 

 

Please let us know, if the provided information’s are helpful to achieve this requirement or not. 

 

Regards, 

Ashokkumar B.  

[beach blah]

Thank you very much for the quick response. You steered me in the right direction for what I was trying to do. I changed a few things to avoid using jquery or a query selector.

I'll include this for anyone else that may be looking to accomplish a similar thing.

Example does the following: 

1. Button click will focus the maskedit and move cursor to start.
   
2. Focus on maskedit will move cursor to start if no value currently exists

HTML

<button type="button" (click)="moveCursor(maskedit)" />

<input #maskedit ej-maskedit (focusIn)="moveCursor(maskedit)" [(ngModel)]="code" maskFormat="9 9 9 9 9" />

Typescript

moveCursor(medit):void {

      if (!medit.widget.model.value) {

            setTimeout(() => {

                medit.widget._textbox.focus();

                medit.widget._textbox.setSelectionRange(0, 0);

            });

       }

};

Thanks again for your help!

[Ashokkumar Balasubramanian]

Hi Beach, 

 

Thanks for your update. 

 

We have analyzed your query and code block. In that code block, you have tried to move the cursor on MaskEdit component without jQuery and query selector. You can achieve this requirement by invoking MaskEdit component models from component instance. Please check the below code block. 

 

[Html] 

 

<button type="button" (click)="moveCursor(maskedit)">Move Cursor</button> 

 

//mask is a component instance of MaskEdit Component 

 

<input #mask ej-maskedit name="mecode" [(ngModel)]="newContactMethod.phoneNumber" maskFormat='9 9 9 9 9' (focusIn)="moveCursor(maskedit)" /> 

 

[Typescript] 

 

export class MaskComponent { 

    public newContactMethod: any; 

    @ViewChild('mask') maskedit: EJComponents<any, any>; 

    constructor() { 

       this.newContactMethod = { phoneNumber : "" } 

    } 

    moveCursor(medit):void { 

      if (!this.maskedit.widget.model.value) { 

            setTimeout(() => { 

                this.maskedit.widget._textbox.focus(); 

                this.maskedit.widget._textbox.setSelectionRange(0, 0); 

            }); 

       } 

    }; 

} 

 

For your convenience we have modified the sample, please check the sample in below location. 

 

Sample. 

 

To know more details about Invoking EJ components models from component instance, please check the below help document. 

 

https://help.syncfusion.com/angular/overview#invoking-ej-widget-methods-from-component-instance 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B.