![]() Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/clinic.corals.io/node_modules/intl-tel-input/examples/gen/ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example: National Mode</title> <link rel="stylesheet" href="../css/prism.css"> <link rel="stylesheet" href="../../build/css/intlTelInput.css?1613236686837"> <link rel="stylesheet" href="../../build/css/demo.css?1613236686837"> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-N472J4QKC4'); </script> </head> <body> <a href="/">Back</a> <h1>Example: National Mode</h1> <p>Allow users to enter their national number, and then convert it to international format using the public method getNumber.</p> <h2>Markup</h2> <pre><code class="language-markup"><p id="output">Please enter a valid number below</p> <input id="phone" type="tel"> </code></pre> <h2>Code</h2> <pre><code class="language-javascript">var input = document.querySelector("#phone"), output = document.querySelector("#output"); var iti = window.intlTelInput(input, { nationalMode: true, utilsScript: "../../build/js/utils.js?1613236686837" // just for formatting/placeholders etc }); var handleChange = function() { var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below"; var textNode = document.createTextNode(text); output.innerHTML = ""; output.appendChild(textNode); }; // listen to "keyup", but also "change" to update when the user selects a country input.addEventListener('change', handleChange); input.addEventListener('keyup', handleChange); </code></pre> <h2>Result</h2> <div id="result"> <p id="output">Please enter a valid number below</p> <input id="phone" type="tel"> </div> <script src="../js/prism.js"></script> <script src="../../build/js/intlTelInput.js?1613236686837"></script> <script src="./js/nationalMode.js?1613236686837"></script> </body> </html>