Share feedback, ideas and get community help

Updated 10 months ago

Change input class text to number

At a glance

The community members are discussing how to change a form input to only accept numbers, so that when clicked on a smartphone, it only shows the numeric keyboard. The main issue is that when using a number input, the leading zero is deleted. A community member provided a solution involving manipulating the input type via a script block, which was tested and worked. However, another community member found this solution to be too complicated and wanted a simpler solution. Eventually, the issue was resolved, and the community member confirmed that the solution worked well.

Useful resources
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