intl-tel-input 18.1.0 → 18.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc +2 -8
- package/.vscode/settings.json +8 -0
- package/CHANGELOG.md +3 -0
- package/Gruntfile.js +0 -2
- package/README.md +14 -25
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput-jquery.js +160 -59
- package/build/js/intlTelInput-jquery.min.js +3 -3
- package/build/js/intlTelInput.js +160 -59
- package/build/js/intlTelInput.min.js +3 -3
- package/composer.json +1 -1
- package/demo.html +42 -44
- package/demo_rtl.html +21 -23
- package/grunt/template.js +2 -265
- package/package.json +4 -1
- package/src/js/intlTelInput.js +563 -333
- package/examples/css/countrySync.css +0 -10
- package/examples/css/isValidNumber.css +0 -12
- package/examples/css/prism.css +0 -126
- package/examples/gen/country-sync.html +0 -98
- package/examples/gen/default-country-ip.html +0 -62
- package/examples/gen/display-number.html +0 -47
- package/examples/gen/hidden-input.html +0 -54
- package/examples/gen/init-promise.html +0 -66
- package/examples/gen/is-valid-number.html +0 -86
- package/examples/gen/js/countrySync.js +0 -31
- package/examples/gen/js/defaultCountryIp.js +0 -11
- package/examples/gen/js/displayNumber.js +0 -4
- package/examples/gen/js/hiddenInput.js +0 -5
- package/examples/gen/js/initPromise.js +0 -9
- package/examples/gen/js/isValidNumber.js +0 -37
- package/examples/gen/js/modifyCountryData.js +0 -11
- package/examples/gen/js/multipleInstances.js +0 -13
- package/examples/gen/js/nationalMode.js +0 -18
- package/examples/gen/js/onlyCountriesEurope.js +0 -8
- package/examples/gen/modify-country-data.html +0 -52
- package/examples/gen/multiple-instances.html +0 -60
- package/examples/gen/national-mode.html +0 -63
- package/examples/gen/only-countries-europe.html +0 -49
- package/examples/js/countrySync.js.ejs +0 -31
- package/examples/js/defaultCountryIp.js.ejs +0 -11
- package/examples/js/displayNumber.js.ejs +0 -4
- package/examples/js/hiddenInput.js.ejs +0 -5
- package/examples/js/initPromise.js.ejs +0 -9
- package/examples/js/isValidNumber.js.ejs +0 -37
- package/examples/js/modifyCountryData.js.ejs +0 -11
- package/examples/js/multipleInstances.js.ejs +0 -13
- package/examples/js/nationalMode.js.ejs +0 -18
- package/examples/js/onlyCountriesEurope.js.ejs +0 -8
- package/examples/js/prism.js +0 -11
- package/examples/partials/countrySync.html +0 -13
- package/examples/partials/defaultCountryIp.html +0 -5
- package/examples/partials/displayNumber.html +0 -1
- package/examples/partials/hiddenInput.html +0 -4
- package/examples/partials/initPromise.html +0 -8
- package/examples/partials/isValidNumber.html +0 -3
- package/examples/partials/multipleInstances.html +0 -3
- package/examples/partials/nationalMode.html +0 -2
- package/examples/partials/simpleInput.html +0 -1
- package/examples/template.html.ejs +0 -43
package/examples/css/prism.css
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* prism.js default theme for JavaScript, CSS and HTML
|
|
3
|
-
* Based on dabblet (http://dabblet.com)
|
|
4
|
-
* @author Lea Verou
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
code[class*="language-"],
|
|
8
|
-
pre[class*="language-"] {
|
|
9
|
-
color: black;
|
|
10
|
-
text-shadow: 0 1px white;
|
|
11
|
-
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
|
12
|
-
direction: ltr;
|
|
13
|
-
text-align: left;
|
|
14
|
-
white-space: pre;
|
|
15
|
-
word-spacing: normal;
|
|
16
|
-
word-break: normal;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
-moz-tab-size: 4;
|
|
20
|
-
-o-tab-size: 4;
|
|
21
|
-
tab-size: 4;
|
|
22
|
-
|
|
23
|
-
-webkit-hyphens: none;
|
|
24
|
-
-moz-hyphens: none;
|
|
25
|
-
-ms-hyphens: none;
|
|
26
|
-
hyphens: none;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
|
30
|
-
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
|
31
|
-
text-shadow: none;
|
|
32
|
-
background: #b3d4fc;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
|
36
|
-
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
|
37
|
-
text-shadow: none;
|
|
38
|
-
background: #b3d4fc;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@media print {
|
|
42
|
-
code[class*="language-"],
|
|
43
|
-
pre[class*="language-"] {
|
|
44
|
-
text-shadow: none;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* Code blocks */
|
|
49
|
-
pre[class*="language-"] {
|
|
50
|
-
padding: 1em;
|
|
51
|
-
margin: .5em 0;
|
|
52
|
-
overflow: auto;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
:not(pre) > code[class*="language-"],
|
|
56
|
-
pre[class*="language-"] {
|
|
57
|
-
background: #f5f2f0;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* Inline code */
|
|
61
|
-
:not(pre) > code[class*="language-"] {
|
|
62
|
-
padding: .1em;
|
|
63
|
-
border-radius: .3em;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.token.comment,
|
|
67
|
-
.token.prolog,
|
|
68
|
-
.token.doctype,
|
|
69
|
-
.token.cdata {
|
|
70
|
-
color: slategray;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.token.punctuation {
|
|
74
|
-
color: #999;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.namespace {
|
|
78
|
-
opacity: .7;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.token.property,
|
|
82
|
-
.token.tag,
|
|
83
|
-
.token.boolean,
|
|
84
|
-
.token.number,
|
|
85
|
-
.token.constant,
|
|
86
|
-
.token.symbol {
|
|
87
|
-
color: #905;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.token.selector,
|
|
91
|
-
.token.attr-name,
|
|
92
|
-
.token.string,
|
|
93
|
-
.token.builtin {
|
|
94
|
-
color: #690;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.token.operator,
|
|
98
|
-
.token.entity,
|
|
99
|
-
.token.url,
|
|
100
|
-
.language-css .token.string,
|
|
101
|
-
.style .token.string,
|
|
102
|
-
.token.variable {
|
|
103
|
-
color: #a67f59;
|
|
104
|
-
background: hsla(0,0%,100%,.5);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.token.atrule,
|
|
108
|
-
.token.attr-value,
|
|
109
|
-
.token.keyword {
|
|
110
|
-
color: #07a;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
.token.regex,
|
|
115
|
-
.token.important {
|
|
116
|
-
color: #e90;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.token.important {
|
|
120
|
-
font-weight: bold;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.token.entity {
|
|
124
|
-
cursor: help;
|
|
125
|
-
}
|
|
126
|
-
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Country sync</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
<link rel="stylesheet" href="../css/countrySync.css?1680993492797">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
14
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
15
|
-
<script>
|
|
16
|
-
window.dataLayer = window.dataLayer || [];
|
|
17
|
-
function gtag(){dataLayer.push(arguments);}
|
|
18
|
-
gtag('js', new Date());
|
|
19
|
-
gtag('config', 'G-N472J4QKC4');
|
|
20
|
-
</script>
|
|
21
|
-
</head>
|
|
22
|
-
|
|
23
|
-
<body>
|
|
24
|
-
<a href="/">Back</a>
|
|
25
|
-
<h1>Example: Country sync</h1>
|
|
26
|
-
<p>Use static getCountryData method to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync.</p>
|
|
27
|
-
|
|
28
|
-
<h2>Markup</h2>
|
|
29
|
-
<pre><code class="language-markup"><div class="form-item">
|
|
30
|
-
<label>Telephone number</label>
|
|
31
|
-
<input id="phone" type="tel">
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<div class="form-item">
|
|
35
|
-
<label>Address</label>
|
|
36
|
-
<input type="text" placeholder="House name/number">
|
|
37
|
-
<input type="text" placeholder="City">
|
|
38
|
-
<input type="text" placeholder="State">
|
|
39
|
-
<input type="text" placeholder="Zip code">
|
|
40
|
-
<select id="address-country"></select>
|
|
41
|
-
</div></code></pre>
|
|
42
|
-
|
|
43
|
-
<h2>Code</h2>
|
|
44
|
-
<pre><code class="language-javascript">// get the country data from the plugin
|
|
45
|
-
var countryData = window.intlTelInputGlobals.getCountryData(),
|
|
46
|
-
input = document.querySelector("#phone"),
|
|
47
|
-
addressDropdown = document.querySelector("#address-country");
|
|
48
|
-
|
|
49
|
-
// init plugin
|
|
50
|
-
var iti = window.intlTelInput(input, {
|
|
51
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
// populate the country dropdown
|
|
55
|
-
for (var i = 0; i < countryData.length; i++) {
|
|
56
|
-
var country = countryData[i];
|
|
57
|
-
var optionNode = document.createElement("option");
|
|
58
|
-
optionNode.value = country.iso2;
|
|
59
|
-
var textNode = document.createTextNode(country.name);
|
|
60
|
-
optionNode.appendChild(textNode);
|
|
61
|
-
addressDropdown.appendChild(optionNode);
|
|
62
|
-
}
|
|
63
|
-
// set it's initial value
|
|
64
|
-
addressDropdown.value = iti.getSelectedCountryData().iso2;
|
|
65
|
-
|
|
66
|
-
// listen to the telephone input for changes
|
|
67
|
-
input.addEventListener('countrychange', function(e) {
|
|
68
|
-
addressDropdown.value = iti.getSelectedCountryData().iso2;
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
// listen to the address dropdown for changes
|
|
72
|
-
addressDropdown.addEventListener('change', function() {
|
|
73
|
-
iti.setCountry(this.value);
|
|
74
|
-
});
|
|
75
|
-
</code></pre>
|
|
76
|
-
|
|
77
|
-
<h2>Result</h2>
|
|
78
|
-
<div id="result">
|
|
79
|
-
<div class="form-item">
|
|
80
|
-
<label>Telephone number</label>
|
|
81
|
-
<input id="phone" type="tel">
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<div class="form-item">
|
|
85
|
-
<label>Address</label>
|
|
86
|
-
<input type="text" placeholder="House name/number">
|
|
87
|
-
<input type="text" placeholder="City">
|
|
88
|
-
<input type="text" placeholder="State">
|
|
89
|
-
<input type="text" placeholder="Zip code">
|
|
90
|
-
<select id="address-country"></select>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<script src="../js/prism.js"></script>
|
|
95
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
96
|
-
<script src="./js/countrySync.js?1680993492797"></script>
|
|
97
|
-
</body>
|
|
98
|
-
</html>
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Lookup user's country</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Lookup user's country</h1>
|
|
24
|
-
<p>Set initialCountry to 'auto' and pass in a function for geoIpLookup to perform a JSONP request to ipinfo.io, which returns the user's country based on their IP address.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><!-- fetch and Promise polyfills for IE11 -->
|
|
28
|
-
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
|
|
29
|
-
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js"></script>
|
|
30
|
-
|
|
31
|
-
<input id="phone" type="tel">
|
|
32
|
-
</code></pre>
|
|
33
|
-
|
|
34
|
-
<h2>Code</h2>
|
|
35
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone");
|
|
36
|
-
window.intlTelInput(input, {
|
|
37
|
-
initialCountry: "auto",
|
|
38
|
-
geoIpLookup: function(callback) {
|
|
39
|
-
fetch("https://ipapi.co/json")
|
|
40
|
-
.then(function(res) { return res.json(); })
|
|
41
|
-
.then(function(data) { callback(data.country_code); })
|
|
42
|
-
.catch(function() { callback("us"); });
|
|
43
|
-
},
|
|
44
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
45
|
-
});
|
|
46
|
-
</code></pre>
|
|
47
|
-
|
|
48
|
-
<h2>Result</h2>
|
|
49
|
-
<div id="result">
|
|
50
|
-
<!-- fetch and Promise polyfills for IE11 -->
|
|
51
|
-
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
|
|
52
|
-
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js"></script>
|
|
53
|
-
|
|
54
|
-
<input id="phone" type="tel">
|
|
55
|
-
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<script src="../js/prism.js"></script>
|
|
59
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
60
|
-
<script src="./js/defaultCountryIp.js?1680993492797"></script>
|
|
61
|
-
</body>
|
|
62
|
-
</html>
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Display an existing number</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Display an existing number</h1>
|
|
24
|
-
<p>We initialise the plugin on an input which already contains a full international number. The plugin will automatically select the relevant flag, and re-format the number to national format.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><input id="phone" type="tel" value="+447733312345">
|
|
28
|
-
</code></pre>
|
|
29
|
-
|
|
30
|
-
<h2>Code</h2>
|
|
31
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone");
|
|
32
|
-
window.intlTelInput(input, {
|
|
33
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
34
|
-
});
|
|
35
|
-
</code></pre>
|
|
36
|
-
|
|
37
|
-
<h2>Result</h2>
|
|
38
|
-
<div id="result">
|
|
39
|
-
<input id="phone" type="tel" value="+447733312345">
|
|
40
|
-
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<script src="../js/prism.js"></script>
|
|
44
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
45
|
-
<script src="./js/displayNumber.js?1680993492797"></script>
|
|
46
|
-
</body>
|
|
47
|
-
</html>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Submitting the full international number using a hidden input</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Submitting the full international number using a hidden input</h1>
|
|
24
|
-
<p>If you're submitting the form using Ajax, simply use getNumber to get the full international number before sending it. If you're using the standard form POST method, you can use the hiddenInput option to automatically create a hidden input that gets populated with the full international number on submit. Try submitting a valid number below, and then check the 'full_phone' parameter in the URL.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><form>
|
|
28
|
-
<input id="phone" type="tel" name="phone">
|
|
29
|
-
<button type="submit">Submit</button>
|
|
30
|
-
</form>
|
|
31
|
-
</code></pre>
|
|
32
|
-
|
|
33
|
-
<h2>Code</h2>
|
|
34
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone");
|
|
35
|
-
window.intlTelInput(input, {
|
|
36
|
-
hiddenInput: "full_phone",
|
|
37
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
38
|
-
});
|
|
39
|
-
</code></pre>
|
|
40
|
-
|
|
41
|
-
<h2>Result</h2>
|
|
42
|
-
<div id="result">
|
|
43
|
-
<form>
|
|
44
|
-
<input id="phone" type="tel" name="phone">
|
|
45
|
-
<button type="submit">Submit</button>
|
|
46
|
-
</form>
|
|
47
|
-
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<script src="../js/prism.js"></script>
|
|
51
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
52
|
-
<script src="./js/hiddenInput.js?1680993492797"></script>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Using the promise returned from initialisation</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Using the promise returned from initialisation</h1>
|
|
24
|
-
<p>Use this promise to know when the plugin has completely finished initialising, including completing any asynchronous actions you might have enabled with the initialisation options e.g. fetching utils.js with the utilsScript option, and performing the ip lookup with the geoIpLookup option.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><!-- polyfill for IE11 -->
|
|
28
|
-
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
|
|
29
|
-
|
|
30
|
-
<p>
|
|
31
|
-
Status:
|
|
32
|
-
<span id="status">Initialising...</span>
|
|
33
|
-
</p>
|
|
34
|
-
<input id="phone" type="tel">
|
|
35
|
-
</code></pre>
|
|
36
|
-
|
|
37
|
-
<h2>Code</h2>
|
|
38
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone");
|
|
39
|
-
var statusElement = document.querySelector("#status");
|
|
40
|
-
|
|
41
|
-
var iti = window.intlTelInput(input, {
|
|
42
|
-
utilsScript: "../../build/js/utils.js?1680993492797",
|
|
43
|
-
});
|
|
44
|
-
iti.promise.then(function() {
|
|
45
|
-
statusElement.innerHTML = "Initialised!";
|
|
46
|
-
});
|
|
47
|
-
</code></pre>
|
|
48
|
-
|
|
49
|
-
<h2>Result</h2>
|
|
50
|
-
<div id="result">
|
|
51
|
-
<!-- polyfill for IE11 -->
|
|
52
|
-
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
|
|
53
|
-
|
|
54
|
-
<p>
|
|
55
|
-
Status:
|
|
56
|
-
<span id="status">Initialising...</span>
|
|
57
|
-
</p>
|
|
58
|
-
<input id="phone" type="tel">
|
|
59
|
-
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<script src="../js/prism.js"></script>
|
|
63
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
64
|
-
<script src="./js/initPromise.js?1680993492797"></script>
|
|
65
|
-
</body>
|
|
66
|
-
</html>
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Validation</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
<link rel="stylesheet" href="../css/isValidNumber.css?1680993492797">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
14
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
15
|
-
<script>
|
|
16
|
-
window.dataLayer = window.dataLayer || [];
|
|
17
|
-
function gtag(){dataLayer.push(arguments);}
|
|
18
|
-
gtag('js', new Date());
|
|
19
|
-
gtag('config', 'G-N472J4QKC4');
|
|
20
|
-
</script>
|
|
21
|
-
</head>
|
|
22
|
-
|
|
23
|
-
<body>
|
|
24
|
-
<a href="/">Back</a>
|
|
25
|
-
<h1>Example: Validation</h1>
|
|
26
|
-
<p>Use the isValidNumber method (which utilises Google's libphonenumber) to validate the telephone number on the blur event.</p>
|
|
27
|
-
|
|
28
|
-
<h2>Markup</h2>
|
|
29
|
-
<pre><code class="language-markup"><input id="phone" type="tel">
|
|
30
|
-
<span id="valid-msg" class="hide">✓ Valid</span>
|
|
31
|
-
<span id="error-msg" class="hide"></span>
|
|
32
|
-
</code></pre>
|
|
33
|
-
|
|
34
|
-
<h2>Code</h2>
|
|
35
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone"),
|
|
36
|
-
errorMsg = document.querySelector("#error-msg"),
|
|
37
|
-
validMsg = document.querySelector("#valid-msg");
|
|
38
|
-
|
|
39
|
-
// here, the index maps to the error code returned from getValidationError - see readme
|
|
40
|
-
var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
|
|
41
|
-
|
|
42
|
-
// initialise plugin
|
|
43
|
-
var iti = window.intlTelInput(input, {
|
|
44
|
-
utilsScript: "../../build/js/utils.js?1680993492797"
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
var reset = function() {
|
|
48
|
-
input.classList.remove("error");
|
|
49
|
-
errorMsg.innerHTML = "";
|
|
50
|
-
errorMsg.classList.add("hide");
|
|
51
|
-
validMsg.classList.add("hide");
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// on blur: validate
|
|
55
|
-
input.addEventListener('blur', function() {
|
|
56
|
-
reset();
|
|
57
|
-
if (input.value.trim()) {
|
|
58
|
-
if (iti.isValidNumber()) {
|
|
59
|
-
validMsg.classList.remove("hide");
|
|
60
|
-
} else {
|
|
61
|
-
input.classList.add("error");
|
|
62
|
-
var errorCode = iti.getValidationError();
|
|
63
|
-
errorMsg.innerHTML = errorMap[errorCode];
|
|
64
|
-
errorMsg.classList.remove("hide");
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
// on keyup / change flag: reset
|
|
70
|
-
input.addEventListener('change', reset);
|
|
71
|
-
input.addEventListener('keyup', reset);
|
|
72
|
-
</code></pre>
|
|
73
|
-
|
|
74
|
-
<h2>Result</h2>
|
|
75
|
-
<div id="result">
|
|
76
|
-
<input id="phone" type="tel">
|
|
77
|
-
<span id="valid-msg" class="hide">✓ Valid</span>
|
|
78
|
-
<span id="error-msg" class="hide"></span>
|
|
79
|
-
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
<script src="../js/prism.js"></script>
|
|
83
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
84
|
-
<script src="./js/isValidNumber.js?1680993492797"></script>
|
|
85
|
-
</body>
|
|
86
|
-
</html>
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
// get the country data from the plugin
|
|
2
|
-
var countryData = window.intlTelInputGlobals.getCountryData(),
|
|
3
|
-
input = document.querySelector("#phone"),
|
|
4
|
-
addressDropdown = document.querySelector("#address-country");
|
|
5
|
-
|
|
6
|
-
// init plugin
|
|
7
|
-
var iti = window.intlTelInput(input, {
|
|
8
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
// populate the country dropdown
|
|
12
|
-
for (var i = 0; i < countryData.length; i++) {
|
|
13
|
-
var country = countryData[i];
|
|
14
|
-
var optionNode = document.createElement("option");
|
|
15
|
-
optionNode.value = country.iso2;
|
|
16
|
-
var textNode = document.createTextNode(country.name);
|
|
17
|
-
optionNode.appendChild(textNode);
|
|
18
|
-
addressDropdown.appendChild(optionNode);
|
|
19
|
-
}
|
|
20
|
-
// set it's initial value
|
|
21
|
-
addressDropdown.value = iti.getSelectedCountryData().iso2;
|
|
22
|
-
|
|
23
|
-
// listen to the telephone input for changes
|
|
24
|
-
input.addEventListener('countrychange', function(e) {
|
|
25
|
-
addressDropdown.value = iti.getSelectedCountryData().iso2;
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
// listen to the address dropdown for changes
|
|
29
|
-
addressDropdown.addEventListener('change', function() {
|
|
30
|
-
iti.setCountry(this.value);
|
|
31
|
-
});
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone");
|
|
2
|
-
window.intlTelInput(input, {
|
|
3
|
-
initialCountry: "auto",
|
|
4
|
-
geoIpLookup: function(callback) {
|
|
5
|
-
fetch("https://ipapi.co/json")
|
|
6
|
-
.then(function(res) { return res.json(); })
|
|
7
|
-
.then(function(data) { callback(data.country_code); })
|
|
8
|
-
.catch(function() { callback("us"); });
|
|
9
|
-
},
|
|
10
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
11
|
-
});
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone");
|
|
2
|
-
var statusElement = document.querySelector("#status");
|
|
3
|
-
|
|
4
|
-
var iti = window.intlTelInput(input, {
|
|
5
|
-
utilsScript: "../../build/js/utils.js?1680993492797",
|
|
6
|
-
});
|
|
7
|
-
iti.promise.then(function() {
|
|
8
|
-
statusElement.innerHTML = "Initialised!";
|
|
9
|
-
});
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone"),
|
|
2
|
-
errorMsg = document.querySelector("#error-msg"),
|
|
3
|
-
validMsg = document.querySelector("#valid-msg");
|
|
4
|
-
|
|
5
|
-
// here, the index maps to the error code returned from getValidationError - see readme
|
|
6
|
-
var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
|
|
7
|
-
|
|
8
|
-
// initialise plugin
|
|
9
|
-
var iti = window.intlTelInput(input, {
|
|
10
|
-
utilsScript: "../../build/js/utils.js?1680993492797"
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
var reset = function() {
|
|
14
|
-
input.classList.remove("error");
|
|
15
|
-
errorMsg.innerHTML = "";
|
|
16
|
-
errorMsg.classList.add("hide");
|
|
17
|
-
validMsg.classList.add("hide");
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
// on blur: validate
|
|
21
|
-
input.addEventListener('blur', function() {
|
|
22
|
-
reset();
|
|
23
|
-
if (input.value.trim()) {
|
|
24
|
-
if (iti.isValidNumber()) {
|
|
25
|
-
validMsg.classList.remove("hide");
|
|
26
|
-
} else {
|
|
27
|
-
input.classList.add("error");
|
|
28
|
-
var errorCode = iti.getValidationError();
|
|
29
|
-
errorMsg.innerHTML = errorMap[errorCode];
|
|
30
|
-
errorMsg.classList.remove("hide");
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
// on keyup / change flag: reset
|
|
36
|
-
input.addEventListener('change', reset);
|
|
37
|
-
input.addEventListener('keyup', reset);
|