Forum Documentation Showcase Pricing Learn more

How to creat mobile virtual keyboard? For login page


#1

Something like this.

Thankyou


#2

If you were to place an input field above the key pad, with each key being a standard Group element, you could create a workflow upon clicking each key Group that modifies the input value.

Input Field’s current value + [1][2][3], etc – depending on which key is pressed, you would append a different number. As for the backspace, you could modify the input field value by taking current input field’s value and trimming off the last character by 1.

Edit: I just noticed you posted before asking a similar question only 1 hour ago. Try to keep all conversations about a certain topic within a single thread so that people can more easily help you. If there are multiple identical topics active at the same time it will hurt your chances of receiving feedback. 30 minutes is not exactly a long enough time frame to expect a response from the community.


#3

Thankyou!!! im gonna try this. But how can i recieve this data?


#4

Hi! I have the same challange, I tried to follow this advice but couldnt do it. Can you explain with a bit more details, kind of a step by step to do it (build the internal keyboard to fill an input form)?


#5

@allesermeedoen @felipe

I will post back here in the next day or two with a walkthrough on how to accomplish this. I’ll place all my work in a public app so you can see the inner workings :slight_smile:


#6

If I were to use custom states how do I add number?
is there is a way to concatenate strings in bubble ?


#7

@MrMaker My solution at the time was overall hacky and relying on a big mess of custom states, custom JavaScript, and several elements/groups. I ended up implementing a 3rd party virtual keyboard some time later. You can see implementation info here: https://franciscohodge.com/projects/simple-keyboard/getting-started/#usage-cdn

Demo: https://franciscohodge.com/project-pages/simple-keyboard/demo/


#8

@philip @MrMaker

Hey guys, simple-keyboard creator here!

For this use-case, I think this demo could work: https://simple-keyboard.com/demo/#mobile

If you have any questions regarding the virtual keyboard, you can reach out on Discord or on Github. I’ll respond pretty quick.

Cheers,
Francisco Hodge