ValueChanged send the caret to the last position

[Adriana Selena Tito Ilasaca]

Hi Dear Syncfusion 
Working with the Input Mask component, I want to perform two things.

1. I have the mask 00000-00 focusing in the first section when I change a value in a specific position for example in 3dh position I want to clear the values that come after the value changed for example from 00000-00 to 005__-00 I need to get this, I am getting the position of the value I want to update with jsinterops then with the position I want to have empty spaces in the first section. is there a way to perform this? in the sample project I have I am filling the next value positions with zeros but that is not what I need. When I have 00500-00 and I change the first position I need to get 1____-00
2. My second question is After I updated the value in a specific position I need to send the caret to the next position to be able to continue editing but using ValueChanged the caret is sent to the last position even if I set the position of the caret using jsinterops, is there a way to enable that behavior? (in the project sample the caret is sent to the 2nd position always but you can notice when valuechanged is sent to the last position) I am using ValueChange since I need to update the value based on the keypressed and then set the new input value.
   
   

I will appreciate your answer thanks

Attachment: BlazorApp1_d65e1f93.rar

[Deepak Ramakrishnan]

Hi Adriana, 

 

Thanks for the update. 

 

We are currently working on your requirement . We will update the further possibilities on or before 24^th , September 2021. We appreciate your patience until then. 

 

Thanks, 

Deepak R. 

 

[Deepak Ramakrishnan]

Hi Adriana, 

 

Greetings from Syncfusion support. 

 

1. Query 1 : I have the mask 00000-00 focusing in the first section when I change a value in a specific position for example in 3dh position I want to clear the values that come after the value changed for example from 00000-00 to 005__-00 I need to get this, I am getting the position of the value I want to update with jsinterops then with the position I want to have empty spaces in the first section. is there a way to perform this? in the sample project I have I am filling the next value positions with zeros but that is not what I need. When I have 00500-00 and I change the first position I need to get 1____-00

            We suggest you to follow the following solution for the above requirement  

1.Instead of binding initial value , you can change the values to zero except other numbers typed in the input using regex in ValueChange event as        like below highlighted code . 

public void ValueChangedHandler(MaskChangeEventArgs args) 

    { 

        var maskedvalue = _maskedRef.GetMaskedValue(); 

        StringBuilder str = new StringBuilder(maskedvalue); 

        for (int i = 0; i < maskedvalue.Length; i++) 

        { 

            if (!numberpattern.IsMatch(maskedvalue[i].ToString())) 

            { 

                str[i] = '0'; 

            } 

        } 

        this._value = str.ToString(); 

        //MaskValue = _value; 

        //IJSRuntime.InvokeVoidAsync("SetCaretPosition", "mask"); 

    } 

2.You can also set customized prompt character using the property ‘PromptChar’   as like below highlighted code  

<SfMaskedTextBox @ref="_maskedRef" 

                 ID="mask" 

                 Mask="00000-00" 

                  

                 @oninput="inputhandler" @onkeypress="OnkeyPress" PromptChar='@prompt' ValueChange="ValueChangedHandler"> </SfMaskedTextBox> 

 

 

@code { 

 

    private char prompt { get; set; } = '0'; 

} 

 

API documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_PromptChar 

Query 2 : My second question is After I updated the value in a specific position I need to send the caret to the next position to be able to continue editing but using ValueChanged the caret is sent to the last position even if I set the position of the caret using jsinterops, is there a way to enable that behavior? (in the project sample the caret is sent to the 2nd position always but you can notice when valuechanged is sent to the last position) I am using ValueChange since I need to update the value based on the keypressed and then set the new input value. 

There is no built-in support provided currently for the requested requirement but we can achieve it in inputhandler . As like below highlighted code . As per the below sample the cursor position set to second index once the value get typed. 

[Index.Razor] 

<SfMaskedTextBox @ref="_maskedRef" 

                 ID="mask" 

                 Mask="00000-00" 

                  

                 @oninput="inputhandler" @onkeypress="OnkeyPress" PromptChar='@prompt' ValueChange="ValueChangedHandler"> </SfMaskedTextBox> 

 

 

<br /> 

<br /> 

Value in required format : @_value 

 

@code { 

 

     

    private void inputhandler(Microsoft.AspNetCore.Components.ChangeEventArgs args) 

    { 

        //var k = args; 

        IJSRuntime.InvokeVoidAsync("SetCaretPosition", "mask"); 

    } 

    } 

[Singleedit.js] (Same as your code) 

window.SetCaretPosition = (id) => { 

    var maskObj = document.getElementById(id); 

    maskObj.selectionStart = 2; 

    maskObj.selectionEnd = 2; 

} 

 

 

If the above solution does not meet your requirement kindly provide the use case for your scenario to proceed further .  

             Sample Link : https://www.syncfusion.com/downloads/support/directtrac/343103/ze/BlazorApp11066954956 

Thanks, 

Deepak R.