Share feedback, ideas and get community help

Updated 7 months ago

Change input class text to number

Hi,

Is it possible to change a form input to only accept numbers, so that when clicked on a cellphone, it only shows the numeric keyboard?
Attachment
image.png
M
B
.
15 comments
I need when on smartphone show only numbers like this
Attachment
image0.jpg
the problem is that when I use number input the left zero is deleted
@Baptiste any help ?
Change input class text to number
Have you tried the Number input block?
Hi, Yes I try, but when I use number input the left zero is deleted
@Baptiste take a look.
You can solve this by manipulating the input type via a script block before the number block and changing it to number. Be sure to replace "blockid" with the actual ID of your number input block in the flow.

Here's an example that I tested and worked:
https://typebot.co/my-typebot-dg5wv5y

(() => { const typebotStandard = document.querySelector("typebot-standard"); if (!typebotStandard) return; const shadowRoot = typebotStandard.shadowRoot; if (!shadowRoot) return; const container = shadowRoot.querySelector( '[data-blockid="q6qobr1ls2y7ws59oy990rcz"]' ); if (!container) return; const inputField = container.querySelector('input[type="tel"]'); if (!inputField) return; inputField.type = "number"; })();

One thing to note, if for some reason the script doesn't work, you might need to add a way to wait for the input to appear, like a setTimeout or MutationObserver, since it needs this element to be available in the DOM.
Attachments
image.png
image.png
AP1GczMreAOlozhTwem5M9ke8bvxmEtEckLgEcOLzc0OT99iPakbCTqMCwLvJ6dpukJ9sDMc6rj-6h0imIl1qGYr5WZJ943RQDWarrk7KYACu-RYUW-4oesAJ9buets01tLswrZyY9EHo_8eXH3JSBAhLK4VIGpq9bSGhbzLSY8Q2f8hbe7UAsSjlIQZAYRTJzWrp96h4JNOZJqSCP1kNM-jpXZUSPEMHEba9gp3v_lDT1O5leJ_nJQLnSqcDF-aeKwfHEv0jFFCkIDVOZ8XGLMsIK2MUNG4eePSSJwYzJNT81xhtsguKZc-gBZmu_fHr6lgsfkWoIwZhuHMEQSf2J74QuDENNLyJBPZCHL_gW2S7zjQRsNAC5VbeY2tfzYOL_d02SWTbvPvEzl30OI93I2I8K0Zj3ojLL9lBgr2XjPPpwejd1M2h3WonXf3-eyWVbg7qpRmKORgaOEDV3suw6rV10K6P5GAb8HlaemVC1ic3EF_sQAAWWUk-1ma..png
@.Enzo thanks for share this solution, but it's very complicated, I will wait for a New one of @Baptiste because I think there must have exist a better and easy way.
Ok, it's due to the fact that we are parsing the number with Number, and it removes leading 0 because it considers it not being a valid number
I'm pushing something that should accept numbers with leading 0s
Should be fixed in 10 min
working well thanks..
Add a reply
Sign up and join the conversation on Discord