Question about "secure code - 4" Weweb element

Hello there, I have a 4-digit secure code that users need to enter to verify their email.

When I use the “secure code” element in Weweb and attempt to type in the second digit, it does not populate into the second box and so on (like it how it would normally be). I have to click on the second box, enter the second digit, click on the third box, enter the third digit, and so on.

How do I get this to happen, where if I type the second digit, it goes to the second box directly, and so on?

UPDATE: Managed to come up with something with Copilot AI :slight_smile:

1 Like

Well done, would you mind sharing it with everyone ?

We will release very soon a new action allowing people to focus input programmatically. So you will be able to attach a workflow on change on the code element and target the next input at every change I guess

Sure! The code I use was (this is for on change workflow on the first box), replace with your own variable values. Then do something very similar to the second and third box~

// Access the global variables
let code1Value = variables[‘’];
let code2Value = variables[‘’];
let code3Value = variables[‘’];
let code4Value = variables[‘’];

// Check if the length of code1Value is more than 1
if (code1Value.length > 1) {
// If it is, add the second character to code2Value
code2Value += code1Value[1];
// And remove it from code1Value
code1Value = code1Value[0];
}

// Check if the length of code2Value is more than 1
if (code2Value.length > 1) {
// If it is, add the second character to code3Value
code3Value += code2Value[1];
// And remove it from code2Value
code2Value = code2Value[0];
}

// Check if the length of code3Value is more than 1
if (code3Value.length > 1) {
// If it is, add the second character to code4Value
code4Value += code3Value[1];
// And remove it from code3Value
code3Value = code3Value[0];
}

// Update the global variables
variables[‘’] = code1Value;
variables[‘’] = code2Value;
variables[‘’] = code3Value;
variables[‘’] = code4Value;

// Return the updated global variables
return {
code1Value: variables[‘’],
code2Value: variables[‘’],
code3Value: variables[‘’],
code4Value: variables[‘’]
};

1 Like