Simple-phone-mask NPM

Simple Phone Mask

A lightweight and customizable phone number input mask with country flags and selection.

Features

🌍 Country flag display with optional country selection
🌍 Automatic country detection by IP address
📱 Automatic phone number formatting based on country
🎯 Custom mask patterns support
🎨 Customizable display options
🚀 No dependencies
📦 Lightweight

Demo

Check out the online demo to see it in action!

Installation

NPM

npm install simple-phone-mask

CDN

<!-- JavaScript -->
<script src="https://unpkg.com/simple-phone-mask@1.0.4/dist/simple-phone-mask.min.js"></script>

<!-- CSS -->
<link href="https://unpkg.com/simple-phone-mask@1.0.4/dist/simple-phone-mask.min.css" rel="stylesheet" />

Usage

HTML

<input type="tel" id="phone" />

JavaScript

// Basic usage with default settings (Ukraine)
new SimplePhoneMask('#phone');

// With country flag and selection
new SimplePhoneMask('#phone', {
	countryCode: 'UA',
	showFlag: true,
	allowCountrySelect: true,
});

// With flag but without country selection
new SimplePhoneMask('#phone', {
	countryCode: 'US',
	showFlag: true,
	allowCountrySelect: false,
});

// Without flag
new SimplePhoneMask('#phone', {
	countryCode: 'PL',
	showFlag: false,
});

// With custom mask pattern
new SimplePhoneMask('#phone', {
	countryCode: '+48',
	maskPattern: '___ ___ ___',
	showFlag: true,
	allowCountrySelect: false,
});

// Auto-detect country by IP
new SimplePhoneMask('#phone', {
	detectIP: true,
	showFlag: true,
	allowCountrySelect: false,
});

Options

Option	Type	Default	Description
countryCode	string	"UA"	Country code (e.g., 'UA', 'US') or phone code (e.g., '+380', '+1')
maskPattern	string	null	Custom mask pattern (overrides default country mask)
showFlag	boolean	true	Show country flag
allowCountrySelect	boolean	true	Allow country selection from dropdown
detectIP	boolean	false	Auto-detect country by IP address. When enabled, the `countryCode` option will be ignored and the country will be determined by the user's IP address.