Format on change

[sylfabre]

Steps to reproduce

1. http://jackocnr.com/node_modules/intl-tel-input/examples/gen/national-mode.html
2. I select France and type 0102030405
3. I click away from the input ie trigger change event (I don't want to have auto format as I type but once typed)

Expected behaviour

The number should be formatted as 01 02 03 04 05
I get the correct formatting on https://rawgit.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/demo-compiled.html with

• phone number = 0102030405
• default country = FR

Actual behaviour

The number is formatted as 0102030405

Initialisation options

List any options you're using e.g. utilsScript or preferredCountries

[sylfabre]

@bertrandflaujac FYI

[jackocnr]

The plugin doesn't provide this out of the box, but it's easy to add: just add a "change" listener to the input, and in the handler, use the plugin's setNumber method (which applies formatting if you have utils.js loaded) to set it to the current input value. See a codepen here: http://codepen.io/jackocnr/pen/rLRKPk

[sylfabre]

@jackocnr I think it would be a nice feature to have it with nationalMode=true
I can submit a pull request if you want

[jackocnr]

@sylfabre thanks for the offer, but I only want to add features when I know they will be useful to a lot of people, and there's just not the demand for this right now.

[sylfabre]

@jackocnr Actually I think this is a bug: spaces are added when the plugin inits with nationalMode set to true so it would be consistent to keep them when the field changes
JS Fiddle if you want to try: https://jsfiddle.net/0uc1stsr/

[jackocnr]

It's nothing to do with nationalMode - it's actually the formatOnInit setting, which is pretty self explanatory. I think it's very common for devs to want to have numbers pre-formatted when first displaying them to the user. I think it's much less common to want the numbers to get re-formatted just after the user has typed them - I think this might be confusing to the user. I personally wouldn't do this on any of my websites.

[sylfabre]

@jackocnr Thank you for your clarification on the options. From what I understand of the code nationalMode is used by formatOnInit to select international or national format.

Have a look at this following use case about the re-formatting just after user has typed

• I want to update my phone number which appears already formatted thanks to formatOnInit
• I change the number => the number doesn't get reformatted after a user action (typing in the input)
• I submit the form => the number now appears formatted thanks to formatOnInit after a user action (submitting a form)

=> The page displays data in two different formats : inconsistent behavior

Or another use case :

• I have an input to edit a phone number
• Somewhere on the page due to a user action, I use setNumber method on this phone input

=> Here a user action triggers a formatting

In my opinion to get a consistent behavior:

• either you decide to format the number so you do it all the time (on init, on change, setNumber, ...)
• or you don't care about formatting then you never do it (neither on init nor on change)

I've checked on Microsoft Excel: if a cell is set to display 2 decimals and you type a number with 3 then on change event, the cell displays only 2 digits. The same applies with monetary format with $ or € symbol, or with the date format.
=> You don't have to save, close and re-open your sheet to get the right formatting.
On my bank website, the IBAN gets formatted (with space every 4 numbers) on change event when I want to do a wire transfer.
On Tweeter, the text turns blue when you type @xxx or #XXX in the textarea not after the tweet is sent.

But the formatting doesn't happen everywhere so we can agree to disagree on this matter 😄

[jackocnr]

Yeah find me a respectable website that auto-formats phone numbers on change, and I will reconsider ;)

[sylfabre]

@jackocnr While updating my profile I've just seen that SNCF website does it. SNCF is the French national train company which makes €4 billion revenue a year and 12 millions unique visitors a month

[jackocnr]

Haha looks like they're using intl-tel-input!

Thanks for the reference - it's good to know. I will make note of this, and if it's something a lot of people want then I will consider adding it.

[stouch]

For me the lack of this feature is the only reason why all the human kind don't use your plugin. You've made such a great work and then you've just not finished it !!
It'd look like just obvious to auto-format phone number on-typing. 0611223344 should auto-format on 06 11 22 33 44 on typing. And if separateDialCode: true, should auto-format to 6 11 22 33 44 (of course). And for american numbers, it should writes 555xxxx to 555-xxxx automatically.

[sylfabre]

@jackocnr I've noticed that Google Contact uses auto format too
https://www.loom.com/share/4b3c41c14f354407947851f60b1f9339

[jackocnr]

@sylfabre wow that is surprising! Well spotted. As far as I can tell this is a relatively new feature for Google Contacts and I want to see if it stands the test of time (and if they decide to use it on their other phone number inputs e.g. when you edit your Google account details, which doesn't currently auto format).

You can read more about the original decision to remove the auto format feature here: #346 - the main issue is that at the time libphonenumber didn't directly support this functionality, and one of their maintainers explicitly advised us against using the library this way, but that was over 3 years ago - there is a chance that has changed now.

[nssmart]

It stands, buddy. Every web-site now autoformats a phone as you enter it. Add the feature, please :)

[coxpert]

I used inputMask, it works well. :)

let phoneLandline = $('#phone_landline');
let phoneLandlineInput = intlTelInput(phoneLandline[0], {
    initialCountry:'ch',
    separateDialCode: true,
    customPlaceholder: function() {
        return "e.g.78 123 45 67";
    },
});
$("#phone_landline").inputmask({mask:"99 999 99 99 99", placeholder:''})

[stouch]

Why this issue is closed ? Is there a solution for this issue ?? :(

[jackocnr]

Sorry I don't want to add this feature as it's a massive can of worms and honestly I think it just creates confusion and doesn't add much value at all.

I'm really surprised that Google do this on Google Contacts, but note that even here it is buggy/inconsistent e.g. if you start typing a US number "+17024" then it will auto add formatting chars as you type, so it appears "+1 702-4" and if you delete the 4, it will auto delete the hyphen, and then if you type 4 again it will auto add the hyphen again. BUT if you leave the 4 and go back and delete the hyphen, then delete the 4 after, so you're left with "+1 702" then when you try adding the 4 again, this time it doesn't auto add the hyphen. Inconsistencies like this just highlight how hard this problem is. HTML text inputs were just not designed for this kind of functionality. And whether you agree or disagree, what I can say for sure is that I don't have time to implement/maintain this kind of functionality.