Disable alphabetic chars (etc) about intl-tel-input HOT 7 CLOSED

Thanks for sharing your experience (that if you accidentally type an irrelevant char into an input, and it lets you do that, then it feels broken).

For me, my experience is that I expect to be able to type whatever I want, and if that silently fails then it feels broken.

You've linked a couple of examples of other plugins that do block irrelevant chars, but the phone inputs on the majority of the major websites I've checked do not do this (e.g. Google Contacts, iCloud Contacts etc).

I'm not going to add this functionality now, but I am open to adding it in the future IF I hear from lots of people that this is something they really want.

For now, this should be easy to add yourself, e.g.

document.getElementById("phone").addEventListener("keydown", (e) => {
    if (e.key && e.key.length === 1 && /[^0-9+\-.() ]/.test(e.key)) e.preventDefault();
});

from intl-tel-input.

Can you describe your use case, and why you think this would improve the user experience?

from intl-tel-input.

@jackocnr Exactly like this one for example ==> https://louismazel.github.io/vue-phone-number-input/ you can't entering a,b,c or other irrelevant character for phone number, it will be better for user experience (is my expected when i see input phone for example)

from intl-tel-input.

I understand what you mean, I'm just not convinced that it is a better UX.

Basically, you're saying: if the user types an irrelevant character, then it's better to ignore it. It raises the questions (1) why would the user type one of those chars in the first place? and (2) if they do try to type one of those characters, why is it better to silently block it, rather than let them do whatever they want?

In my opinion, it's never a good idea to silently block a user's actions - I think it can feel like something is broken.

from intl-tel-input.

Is point of vue but for me is exactly like a number input = number only the same here. In my point entering non wanted character make me feel that something is broken, and poor quality component (is just feeling)

another example => https://svelte-tel-input.vercel.app/

User can type by just not pay to much attention or mistyping, in this case the user will start to delete the wrong character is it really bad felling, and for the latest point i think wrong character must just be ignored during typing

The ideal thing => user input must be equal to pattern/placeholder that mean if pattern is like (044) 444 the user can type (044) 444 and not (((055)) 454

from intl-tel-input.

Thanks for your answer, so why in the mobile phone the plugin display only number is exactly like you do a phone call you don't expect to enter ABC, btw maybe it can be an option ?

from intl-tel-input.

why in the mobile phone the plugin display only number

I assume you're talking about mobile browsing, where tapping on inputs with type=tel opens the numeric keypad. This is because that's all you should need to type in that input. Same with a phone dialer. But we're not talking about those situations. We're talking about a situation where the user has a full keyboard in front of them and might for some reason type something else.

For posterity, I can think of 3 situations in which someone might type an irrelevant character (let me know if you can think of any more!):

1. They accidentally hit the wrong key on the keyboard - in this case, it's probably just helpful if it is silently ignored
2. They're confused and think the input is for something else - in this case, it will just feel broken, though it MIGHT make them look again and realise what the input is actually for. Then again, it might not.
3. They try to paste their phone number into the input, but for whatever reason, something else was in their clipboard (this often happens to me!) - in this case, silently failing will just feel broken and will be confusing and annoying

As I said before, I will consider adding this feature in the future (yes as an option), but only if enough people would find it useful 👍

from intl-tel-input.