63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Example: Multiple Instances</title>
|
|
<link rel="stylesheet" href="../css/prism.css">
|
|
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1541153396801">
|
|
<link rel="stylesheet" href="../../build/css/demo.css?1541153396801">
|
|
|
|
|
|
<!-- GOOGLE ANALYTICS -->
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-85394876-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<!-- /GOOGLE ANALYTICS -->
|
|
</head>
|
|
|
|
<body>
|
|
<a href="/">Back</a>
|
|
<h1>Example: Multiple Instances</h1>
|
|
<p>Here you can see multiple instances of the plugin working alongside each other. I've set the placeholderNumberType differently for each instance to highlight that the instances are completely independent of each other.</p>
|
|
|
|
<h2>Markup</h2>
|
|
<pre><code class="language-markup">Home: <input id="home" type="tel">
|
|
<br><br>
|
|
Mobile: <input id="mobile" type="tel">
|
|
</code></pre>
|
|
|
|
<h2>Code</h2>
|
|
<pre><code class="language-javascript">var inputHome = document.querySelector("#home");
|
|
var inputMobile = document.querySelector("#mobile");
|
|
|
|
window.intlTelInput(inputHome, {
|
|
initialCountry: 'gb',
|
|
placeholderNumberType: 'FIXED_LINE',
|
|
utilsScript: "../../build/js/utils.js?1541153396801" // just for formatting/placeholders etc
|
|
});
|
|
window.intlTelInput(inputMobile, {
|
|
initialCountry: 'gb',
|
|
placeholderNumberType: 'MOBILE',
|
|
utilsScript: "../../build/js/utils.js?1541153396801"
|
|
});
|
|
</code></pre>
|
|
|
|
<h2>Result</h2>
|
|
<div id="result">
|
|
Home: <input id="home" type="tel">
|
|
<br><br>
|
|
Mobile: <input id="mobile" type="tel">
|
|
|
|
</div>
|
|
|
|
<script src="../js/prism.js"></script>
|
|
<script src="../../build/js/intlTelInput.js?1541153396801"></script>
|
|
<script src="./js/multipleInstances.js?1541153396801"></script>
|
|
</body>
|
|
</html>
|