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?
11 Replies
I need when on smartphone show only numbers like this
the problem is that when I use number input the left zero is deleted
@Baptiste any help ?
Have you tried the Number input block?
https://docs.typebot.io/editor/blocks/inputs/number
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.My typebot
My typebot
Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.
@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 minworking well thanks..