Input box auto jump

I’m wondering if there is a way to make the cursor jump from a text input box to the next after a given amount of characters have been entered.

1q3847gt3y1v0pc7p3g4e

The ABC box only needs 3 chars to be entered. after 3 chars are entered i would like it to shift focus to the 1234 Input box.

Yeah, you can run a workflow when condition is true and set the condition to be input-box-ABC length:count = 3. Then, include an action to set focus to input-box-1234.

Note - if there’s no option to set condition based on the length of an input, there’s a quick workaround for that. Simply add a small 1px x 1px shape on the page, have it set to hidden by default. Then, add a condition to it to display when input-box-ABC length:count = 3. You can then have a workflow triggered to reset the focus when the 1px box is visible.

Additionally, I suspect Bubble has a slight delay for this type of action. If you want it to be immediate, I believe Airdev created a free plugin that’ll enable you to get the lenth of the text input immediately (no minor delay). So, you can add that as well.

1 Like

Thank you Sridharan.s! you’re the man!!

Well the concept sounds perfect. i think i have it setup right. but it’s not setting focus. any ideas?

The portion of your logic “value is changed” is something that gets triggered only once that input field is no longer in focus (i.e., after the user has clicked out of that input field). So, that specific portion of the logic doesn’t work for this scenario.

2 Likes

ahh! I understand now.

image

This is working has a slight delay but not too bad.

Yeah, exactly. Also, if you want it to be immediate then you should be able to use Airdev’s free plugin to enable that. I presume it’s straightforward to set-up but haven’t used it myself yet.

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.