placeholder value

[asiminiceanu]

It could be great if for every country selected the placeholder value is changed so that a valid phone number example is presented to the user based on the selected country.

[jackocnr]

Thank you for the idea. How did you see it working? Because currently when you select a country, it's dial code is inserted into the input, so you no longer see the placeholder.

[asiminiceanu]

Maybe I was not clear enough Jack :)
Let's use the demo as an example: https://jackocnr.com/intl-tel-input.html

Default is US selected and the placeholder is saying: e.g. +1 702 123 4567
I select Romania. The input receives the +40 value. I click outside the input (input lost focus).
Now the country selected is Romania and the placeholder value is still the one at the beginning showing for Romania an example for an US phone number.

I was thinking maybe the JS component can take care of this placeholder value also. Maybe have an option to activate the examples. There might be cases where you want always to have the place holder saying "Enter Mobile Number" so you do not require these examples.

If this is doable it could be very nice :)

[jackocnr]

I see what you mean. Yer I agree this could be useful. It would mean finding a resource that contained example numbers for every country (currently 245). I just had a look and Google's libphonenumber does contain a getExampleNumber(region) method on it's PhoneNumberUtil class, so theoretically it would be possible to extract this information (and then merge it into the country data array in src/js/data.js). But thinking about it, this would mean adding 245 strings to size of the JavaScript, and it would only be useful in that one case you outlined, when a user changes the country and then blurs the input, which wont happen very often.

So I agree it's a cool idea, but right now I'm not sure that this feature warrants the increased file size. What do you think?

[asiminiceanu]

Hi Jack,

I understand your concerns about the size. What do you think in this case about a callback method that can be set up and that is called by the JS component in case the country is changed?

In my case I am using the libphonenumber so on this callback I can set the placeholder value.

[jackocnr]

Currently we trigger a "change" event (on the input) when the user selects a flag from the dropdown, so can you just listen for that? There's an example here: https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html

[asiminiceanu]

Looks great.

[riyajk]

Currently we trigger a "change" event (on the input) when the user selects a flag from the dropdown, so can you just listen for that? There's an example here: https://jackocnr.com/lib/intl-tel-input/examples/gen/country-sync.html

Link is not working. :( Also, did any the solution provided as @asiminiceanu putted as a question?

[jackocnr]

I've updated the link. I'm sorry but I don't understand the rest of your question.

[riyajk]

@jackocnr I want to show phone number format placeholder as per country changed.How should I do this?

[asiminiceanu]

@riyajk I will have a look at what I did 5 years a go and come back to you with an example.