157
Views
9
Comments
JavaScript for moving cursor between inputs in web
Question

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();"

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

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


UserImage.jpg
Amr  Ahmed

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 !


2020-09-01 10-42-42
Stefano Valente

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

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

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

2022-07-12 16-41-57
Pedro Costa

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 !

UserImage.jpg
Amr  Ahmed

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.

2019-06-15 21-39-22
Afonso Carvalho
 
MVP

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?

UserImage.jpg
Amr  Ahmed

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 ?

2019-06-15 21-39-22
Afonso Carvalho
 
MVP

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.

IdTest.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.