Comments (10)
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.
from intl-tel-input.
Maybe I was not clear enough Jack :)
Let's use the demo as an example: http://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 :)
from intl-tel-input.
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?
from intl-tel-input.
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.
from intl-tel-input.
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
from intl-tel-input.
Looks great.
from intl-tel-input.
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: http://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?
from intl-tel-input.
I've updated the link. I'm sorry but I don't understand the rest of your question.
from intl-tel-input.
@jackocnr I want to show phone number format placeholder as per country changed.How should I do this?
from intl-tel-input.
@riyajk I will have a look at what I did 5 years a go and come back to you with an example.
from intl-tel-input.
Related Issues (20)
- Separation of Phone Field HOT 2
- Modifier for iti when input disabled HOT 1
- Incorrect Flag Detection Due to Phone Masking in intl-tel-input Library HOT 3
- formatAsYouType includes prefix when not showing flags HOT 6
- @types/intl-tel-input is not synced with intlTelInput.Options HOT 6
- preferredCountries not working HOT 1
- SetAttribute error HOT 3
- reference custom element in wiki HOT 1
- Deleting all characters from input results in console error HOT 4
- Disable alphabetic chars (etc) HOT 7
- Broken Search Broken module Broken all HOT 7
- Cursor pointer HOT 1
- intl-tel-input/19.2.5/img/flags.png 404 not found HOT 2
- When countrySearch: false, and you search for a country it does not scroll to it HOT 5
- Country Dropdown Hidden Mobile HOT 4
- Search country input on mobile browsers is not tapable HOT 6
- React version of intl-tel-input throws an error when unmounted HOT 2
- Format as you type nor working HOT 1
- There should be no 0 after the code in Türkiye number HOT 5
- Bug: `nationalMode` and `showSelectedDialCode` together HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from intl-tel-input.