Cleave.js: US Phone Number with extension

[chrisgo]

What would be the best way to allow for the following format for a US Phone number

555 555 5555 x100

which is a common format for companies that do not have direct numbers but instead use a main corporate number and then either a 1 to 6 digit extension at the end

[niftylettuce]

Bump

[niftylettuce]

@chrisgo you can close this, as here's the solution for you and others:

new Cleave(element, {
  blocks: [0, 3, 3, 4, 10],
  delimiters: ['(', ') ', '-', ' '],
  numericOnly: true
});

[niftylettuce]

[phung02]

I would like to include the x for extension, how would I do that?
If user type in 10 digits, it'll display [phone]
If user type in 13 digits, it'll display [phone] x123

[niftylettuce]

@phung02 you'd probably need something where it detects more than 10 digits and ensures a space and an "x" afterwards if user hits space bar

[phung02]

@niftylettuce Can you update cleave.js to do that?

[niftylettuce]

I don't have the time right now unfortunately

[ghost]

Actually i have need password attack script

On Tue, Mar 5, 2019, 2:28 AM niftylettuce <[email protected] wrote:

I don't have the time right now unfortunately

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nosir/cleave.js/issues/412#issuecomment-469418950,
or mute the thread
https://github.com/notifications/unsubscribe-auth/At66ZQqJoMl33dSybQch0d0cSsIV4Aciks5vTYjpgaJpZM4X7aZP
.

[phung02]

I came up with this, added to cleave.angular.js file
if (!owner.properties.numeral && endPos > 13) { var phoneNo = newValue.substr(0, newValue.indexOf(" ")); var ext = newValue.substr(newValue.indexOf(" ") + 1); newValue = phoneNo + " x" + ext; endPos += 1; }

[phung02]

@niftylettuce
I was able to use cleave.js to format the telephone input to display/format as 123-444-5555 x123 using angularJS. However, when I post the data using the ng-model, the telephone posted to the server as 1234445555x123. I'm not sure why it is not posting the exact format as shown in the text box? Any idea why and how to fix it?

[MichaelMackus]

This seems to work for me:

new Cleave(element, {
    numericOnly: true,
    blocks: [0, 3, 3, 4, 10],
    delimiters: ["(", ") ", "-", " x"]
});

EDIT: Just realized this adds the "x" at the end if the user only enters 10 digits. The following fixes that issue but is far from ideal:

new Cleave(element, {
    numericOnly: true,
    blocks: [0, 3, 3, 4, 10],
    delimiters: ["(", ") ", "-", " x"],
    delimiterLazyShow: true
});