JavaScript for moving cursor between inputs in web

I Am using a java script server action which takes an input parameter an id of input field to navigate between the four verification codes ,the issue is the cursor execute and move very slow .

how can i enhance this behavior ??

javascript : 

SyntaxEditor Code Snippet

"document.getElementById('"+PhoneVerifyCode_input.Id+"').focus();"

Hi Amr,

Why don't use one of the many components availabe in the Forge for Input Masks, like:

https://www.outsystems.com/forge/component-overview/274/input-masks

or

https://www.outsystems.com/forge/component-overview/5574/input-mask-br

Regards,

Daniel


Daniël Kuhlmann wrote:

Hi Amr,

Why don't use one of the many components availabe in the Forge for Input Masks, like:

https://www.outsystems.com/forge/component-overview/274/input-masks

or

https://www.outsystems.com/forge/component-overview/5574/input-mask-br

Regards,

Daniel


Daniel i want the navigation between inputs to be better  , i am using here javascript server action to apply that but it takes too much time !


Why use server action? I would use javascript on client side. 

Die you try one of the forge components? I do not have any performance issues with them.

Hi Amr,


You can add the below JS code on your web screen:

function setFocus(elementid) { 
            document.getElementById(elementid).focus(); 
} 


and, in your inputs, add an extended property sending the next InputId in the setFocus parameter:

e. g.: First input extended properties



Thanks !

Pedro Costa wrote:

Hi Amr,


You can add the below JS code on your web screen:

function setFocus(elementid) { 
            document.getElementById(elementid).focus(); 
} 


and, in your inputs, add an extended property sending the next InputId in the setFocus parameter:

e. g.: First input extended properties



Thanks !


i think your solution is not working the cursor Stays in the first input and nothing happened.

Hi Amr,

The issue with using a server action to apply that behaviour is that the browser needs to send a request to the server in order to execute that action, and the reply must then return to the browser - if you use javascript in the browser directly, you won't suffer from this delay, since everything happens locally.

Pedro's solution looks correct - do you think you could share your code with us so we can help you track the issue? Do you have any javascript errors in your browser console?

Afonso Carvalho wrote:

Hi Amr,

The issue with using a server action to apply that behaviour is that the browser needs to send a request to the server in order to execute that action, and the reply must then return to the browser - if you use javascript in the browser directly, you won't suffer from this delay, since everything happens locally.

Pedro's solution looks correct - do you think you could share your code with us so we can help you track the issue? Do you have any javascript errors in your browser console?

No i don't have any java script errors , could you please try this solution and give me your feedback ?

Seems to be working fine in the latest Firefox, Chrome, and Edge:

https://afonsobc.outsystemscloud.com/IdTest/JavascriptOnChange.aspx

I also attached the oml file.