International Phone Input

Developer
Tim Cheng
Size
6,196 Kb
Views
16,192
  1. International Phone Input Previews
  2. International Phone Input HTML Codes
  3. International Phone Input CSS Codes
  4. International Phone Input JS Codes

How do I make an international phone input?

What is a international phone input? How do you make a international phone input? This script and codes were developed by Tim Cheng on 15 November 2022, Tuesday.

International Phone Input Previews
IQ Test

International Phone Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>International Phone Input</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Intl Phone Input</h1>
<div class="intl-phone-input"> <div class="container"> <div class="intl-code-select"> <select class="select-menu"> </select> <div class="select-display"> &nbsp; </div> </div> <div class="input-wrap"> <input class="phone-input" type="text" placeholder="Phone Number"></input> <span class="error-tip">Error occured</span> </div> <div class="hint-text">123</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

International Phone Input - Script Codes CSS Codes

body,
html { height: 100%; width: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.intl-phone-input { font-size: 14px; width: 300px;
}
.intl-phone-input .container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #000; margin-bottom: 1.5em; width: 100%;
}
.intl-phone-input .intl-code-select { position: relative; cursor: pointer;
}
.intl-phone-input .intl-code-select .select-display { position: relative; z-index: 1; line-height: 2.5em; padding-right: 2em; min-width: 3em;
}
.intl-phone-input .intl-code-select .select-display::before { position: absolute; top: 0px; bottom: 1px; right: 0px; content: "\25BC"; pointer-events: none; color: #000; padding-top: 0.7em; line-height: 1; width: 2em; text-align: center; -webkit-transform: scale(0.84, 0.42); transform: scale(0.84, 0.42);
}
.intl-phone-input .intl-code-select select { position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; height: 100%; width: 100%; opacity: 0; z-index: 2; cursor: pointer;
}
.intl-phone-input .input-wrap { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.intl-phone-input .input-wrap .error-tip { position: absolute; color: #f00; bottom: -1.5em; visibility: hidden;
}
.intl-phone-input .input-wrap.invalid .error-tip { visibility: visible;
}
.intl-phone-input .phone-input { border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline-style: none; height: 2.5em; box-sizing: border-box;
}
.intl-phone-input .hint-text { position: absolute; bottom: -1.5em; left: 0; text-align: center; width: 100%; pointer-events: none; visibility: hidden;
}
.intl-phone-input .hint-text.show { visibility: visible;
}

International Phone Input - Script Codes JS Codes

'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/** Helpers **/
var removeClass = function removeClass(elem, className) { if (elem.classList) { return elem.classList.remove(className); } var pattern = new RegExp('\\s*' + className + '\\s*'); elem.className = elem.className.replace(pattern, '');
};
var addClass = function addClass(elem, className) { if (elem.classList) { return elem.classList.add(className); } var prefix = elem.className ? ' ' : ''; elem.className = elem.className + prefix + className;
};
/** Controllers **/
var IntlCodeSelect = function () { IntlCodeSelect.menuDisplayFn = function menuDisplayFn(item) { return item; }; IntlCodeSelect.displayFn = function displayFn(item) { return item; }; IntlCodeSelect.isDefault = function isDefault(item, i) { return i == 0; }; function IntlCodeSelect(elem, codeList) { _classCallCheck(this, IntlCodeSelect); this.inputElem = elem; this.menuElem = elem.querySelector('.select-menu'); this.displayElem = elem.querySelector('.select-display'); this.codeList = codeList || []; this.__initListeners(); if (codeList && codeList.length) { this.initMenu(codeList); } } IntlCodeSelect.prototype.__initListeners = function __initListeners() { var _this = this; var menuElem = this.menuElem; menuElem.addEventListener('change', function () { _this.updateDisplayByIndex(menuElem.value); }); }; IntlCodeSelect.prototype.initMenu = function initMenu() { var _this2 = this; var codeList = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0]; var menuElem = this.menuElem; this.codeList = codeList; codeList.forEach(function (item, i) { var isDefault = IntlCodeSelect.isDefault(item, i); var opt = new Option(IntlCodeSelect.menuDisplayFn(item), i, false, isDefault); menuElem.add(opt); if (isDefault) { _this2.updateDisplayByIndex(i); } }); }; IntlCodeSelect.prototype.updateDisplayByIndex = function updateDisplayByIndex(i) { var codeList = this.codeList; var displayElem = this.displayElem; var item = codeList[i]; var text = ''; if (item != null) { text = IntlCodeSelect.displayFn(item); } displayElem.textContent = text; }; IntlCodeSelect.prototype.onChange = function onChange(fn) { var menuElem = this.menuElem; menuElem.addEventListener('change', function () { return fn(menuElem.value); }); }; _createClass(IntlCodeSelect, [{ key: 'curSelectedIndex', get: function get() { var menuElem = this.menuElem; return menuElem.value; } }]); return IntlCodeSelect;
}();
var IntlPhoneInput = function () { IntlPhoneInput.hintDisplayFn = function hintDisplayFn(item) { return ''; }; function IntlPhoneInput(elem, codeList) { _classCallCheck(this, IntlPhoneInput); this.selectElem = elem.querySelector('.intl-code-select'); this.hintElem = elem.querySelector('.hint-text'); this.inputElem = elem.querySelector('.phone-input'); this.selectCtrl = new IntlCodeSelect(this.selectElem, codeList); this.codeList = codeList; this.__initListeners(); this.updateHintBySelect(this.selectCtrl.curSelectedIndex); this.error = false; } IntlPhoneInput.prototype.__initListeners = function __initListeners() { var _this3 = this; var selectCtrl = this.selectCtrl; var inputElem = this.inputElem; selectCtrl.onChange(function (selIndex) { _this3.updateHintBySelect(selIndex); }); inputElem.addEventListener('focus', function () { _this3.__showHint(); }); inputElem.addEventListener('blur', function () { _this3.__hideHint(); }); }; IntlPhoneInput.prototype.updateHintBySelect = function updateHintBySelect(i) { var codeList = this.codeList; var hintElem = this.hintElem; var item = codeList[i]; var text = ''; if (item != null) { text = IntlPhoneInput.hintDisplayFn(item); } hintElem.textContent = text; }; IntlPhoneInput.prototype.__showError = function __showError() { var inputElem = this.inputElem; var wrap = inputElem.parentElement; addClass(wrap, 'invalid'); }; IntlPhoneInput.prototype.__hideError = function __hideError() { var inputElem = this.inputElem; var wrap = inputElem.parentElement; removeClass(wrap, 'invalid'); }; IntlPhoneInput.prototype.__hideHint = function __hideHint() { var hintElem = this.hintElem; removeClass(hintElem, 'show'); }; IntlPhoneInput.prototype.__showHint = function __showHint() { var hintElem = this.hintElem; if (!this.error) { addClass(hintElem, 'show'); } }; IntlPhoneInput.prototype.getValues = function getValues() { var codeList = this.codeList; var inputElem = this.inputElem; var selectCtrl = this.selectCtrl; var code = codeList[selectCtrl.curSelectedIndex]; return { code: code, number: inputElem.value }; }; _createClass(IntlPhoneInput, [{ key: 'error', set: function set(hasError) { this.__error = hasError; if (hasError) { this.__hideHint(); this.__showError(); } else { this.__hideError(); } }, get: function get() { return this.__error; } }]); return IntlPhoneInput;
}();
/** Setup demo **/
var areaCodeList = [{ id: 1, show: '+886', area: 'Taiwan', showCase: '932 123 123'
}, { id: 2, show: '+86', area: 'China', showCase: '132 1001 1001'
}, { id: 3, show: '+1', area: 'USA', defaultSelected: true, showCase: '415 123 123'
}];
IntlPhoneInput.hintDisplayFn = function (item) { return item.showCase;
};
IntlCodeSelect.menuDisplayFn = function (item) { return item.area + ' (' + item.show + ')';
};
IntlCodeSelect.displayFn = function (item) { return item.show;
};
IntlCodeSelect.isDefault = function (item) { return item.defaultSelected || false;
};
var phoneInputElem = document.querySelector('.intl-phone-input');
var phoneCtrl = new IntlPhoneInput(phoneInputElem, areaCodeList);
International Phone Input - Script Codes
International Phone Input - Script Codes
Home Page Home
Developer Tim Cheng
Username tmchng
Uploaded November 15, 2022
Rating 3
Size 6,196 Kb
Views 16,192
Do you need developer help for International Phone Input?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Cheng (tmchng) Script Codes
Name
React datepicker
Line animation
Gradient Stops
Step Indicator
Three Value Slider Bar Input
Angularjs Timer
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!