jquery-input-mask-phone-number.js - A simple, easy jquery format phone number mask library

Overview

jquery-input-mask-phone-number

A jQuery Plugin to make masks on input field to US phone format.

Quick start

1. Add latest jQuery and jquery-input-mask -phone-number files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/path/to/jquery-input-mask-phone-number.min.js"></script>

2. Usage

The jquery-input-mask -phone-number syntax is pretty simple. First,you input your selector, followed by the .usPhoneFormat and then as a parameters you have to put the mask that you want the plugin to apply on the form field.

<input type='text' id='yourphone' />

//(xxx) xxx-xxxx format code
$(document).ready(function () {
    $('#yourphone').usPhoneFormat({
        format: '(xxx) xxx-xxxx',
    });   
});

OR
//xxx-xxx-xxxx format code
$(document).ready(function () {
    $('#yourphone').usPhoneFormat({
        format: 'xxx-xxx-xxxx',
    });   
});

//Default xxx-xxx-xxxx  
$(document).ready(function () {
    $('#yourphone').usPhoneFormat();   
});

3. CDN

https://unpkg.com/[email protected]/dist/jquery-input-mask-phone-number.js

<script src="https://unpkg.com/[email protected]/dist/jquery-input-mask-phone-number.js"></script>

Demo Example

Working JSFiddle Link http://jsfiddle.net/rajaramtt/7s3eLokc/25/

Help/Assistance

Create issue : https://github.com/rajaramtt/jquery-input-mask-phone-number/issues

Contribute

Pick one of the issues from the issue list to get started.

Developer

Developer: Raja Rama Mohan Thavalam https://about.me/rajaramtt

Raja Rama Mohan Thavalam
Raja Rama Mohan Thavalam

Follow Me for latest updates. Medium: @rajaramtt Twitter : @rajaramtt FaceBook: @rajaramtt

License

(The MIT License)

Copyright (c) 2018 Raja Rama Mohan Thavalam[email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...

Multiplies a number by zero. Useful for when you need to multiply a number by zero

multiply-by-zero Multiplies a number by zero. Useful for when you need to multiply a number by zero Please consider checking out the links of this pro

Jul 3, 2022

An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.

Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon

May 1, 2021

A robust form library for Lit that enriches input components with easy-to-use data validation features.

A robust form library for Lit that enriches input components with easy-to-use data validation features.

EliteForms A robust form library for Lit that enriches input components with easy-to-use data validation features. Installation npm install elite-form

Jun 28, 2022

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

SWTF (Simple Worklog Task Format) Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can wr

Apr 4, 2022

javascript library to convert a list of objects to a nested json output format, depending on the names in the list

formToNestedJson javascript "library" to convert a list of objects to a nested json output format, depending on the names in the list Basic usage Give

Aug 2, 2021

A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

Oct 5, 2022

Little Javascript / Typescript library for validating format of string like email, url, password...

String-Validators Little Javascript / Typescript library for validating format of string like email, url, password... Signaler un Bug · Proposer une F

Oct 14, 2022

Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Nov 8, 2022

jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light 7ko min.js and 1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Jan 18, 2022
Comments
  • Can't remove number in FireFox

    Can't remove number in FireFox

    Using FF go to: https://jsfiddle.net/1kbat1nb/ Enter a complete number. Then try to delete numbers.

    result: it doesn't let you delete the first 6 numbers. expected outcome: you should be able to edit the numbers.

    http://supportdetails.net/GWJHDMCV

    bug 
    opened by edmenendez 2
  • Entering number with 1 (country code) loses final number

    Entering number with 1 (country code) loses final number

    Many people enter their phone number including the initial 1 (ex: 1-212-123-4567) If someone does that it will only take the first 10 digits and drop the last digit. Is there any way to set it to remove the initial 1 if they start the number with 1?

    opened by Devpaq 1
  • Newest build has logic error

    Newest build has logic error

    The current program has an issue where validation checks are being done after input. So i can type characters as well as numbers and go over the normal phone number limit.

    However, using this version 1.0.11 posted at npmjs.com works flawlessly.

    I can see comparing the 2 files that the difference is on line 33 and 48

    33$(this).on('keyup', function (e) { most recent on github 33$(this).on('keydown touchend', function (e) { version 1.0.11 posted at npmjs.com 48$(this).on('keyup', function (e) { most recent on github 48$(this).on('keydown touchend', function (e) { version 1.0.11 posted at npmjs.com

    The only downside i noticed when using 1.0.11 on npmjs is that ctrl + v to paste numbers won't work however, right click and paste still does.

    Ideally you might wan't to handle both issues somehow.

    bug 
    opened by JoshKasap 1
  • Keying back and deleting at

    Keying back and deleting at "-" breaks mask

    Trying this library out for robustness. After entering in a number, if someone hits their arrow key back to a "-" and hits delete this library deletes the "-".

    Instead hitting delete should gracefully shift the numbers back without affecting the dashes (minus removing them if there are not enough numbers.

    Screen Shot 2019-11-26 at 2 31 55 PM

    enhancement 
    opened by KelseyDH 1
Owner
Raja Rama Mohan Thavalam
Technical Lead Based in Hyderabad, India.
Raja Rama Mohan Thavalam
vanilla javascript input mask

imaskjs vanilla javascript input mask Features get and set raw and unmasked values easily no external dependencies supports overwrite mode supports we

Alexey Kryazhev 4.1k Dec 30, 2022
A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Stefan Haack 220 Nov 7, 2022
front.phone is a Javascript library that identifies, validates and formats phone numbers.

front.phone front.phone is a Javascript library that identifies, validates and formats phone numbers. Demo The main goal of this project is to create

VTEX 55 Oct 27, 2022
A very simple tool that generates multiple spellings of a phone number (to effectively search for it using the OR operator and quotes)

phonenumberqueryconstructor A very simple tool that generates multiple writings of a phone number (to effectively search for it using the OR operator

Cyb_detective 10 Dec 7, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022
🌐 Text Input Component for validating and formatting international phone numbers.

React Native Intl Phone Field Try the Expo Snack ?? ??️ Demo It's a javascript-only (no native code) component that can run in iOS, Android, Expo & Re

Ivanka Todorova 24 Jul 8, 2022
Verify your E-Mail and Phone Number using link sent over mail and sms.

Phone-and-Mail-Verification-With-Link Verify your E-Mail and Phone Number using link sent over mail and sms. Endpoints POST /user/create Body { "n

Prasoon Soni 5 Sep 14, 2022
Verify your E-Mail and Phone Number using link sent over mail and sms.

Send Verification Link ✅ Explore the docs » • Report Bug • Request Feature • About The Project Verify your E-Mail and Phone Number using link sent ove

Prasoon Soni 4 Jun 28, 2022
Format input text content when you are typing...

Cleave.js Cleave.js has a simple purpose: to help you format input text content automatically. Features Credit card number formatting Phone number for

Max Huang 17.6k Dec 29, 2022
A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Lars Straathof 1 Apr 13, 2022