jQuery国际电话输入插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery国际电话输入插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <link rel="stylesheet" href="css/intlTelInput.css">
    <link rel="stylesheet" href="css/demo.css">
  </head>
  <body>
<center>
    <h1>jQuery&#x56FD;&#x9645;&#x7535;&#x8BDD;&#x8F93;&#x5165;&#x63D2;&#x4EF6;</h1>
    <input id="mobile-number" type="tel" placeholder="e.g. +1 702 123 4567">
    <button type="button">Submit</button>
</center>
    <!-- Load jQuery from CDN so can run demo immediately -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/intlTelInput.js"></script>
    <script>
      $("#mobile-number").intlTelInput();
    </script>
</body>
</html>

CSS代码(demo.css):

*{box-sizing:border-box;-moz-box-sizing:border-box;}
body{margin:20px;font-size:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#555;}
.hide{display:none;}
pre{margin:0 !important;display:inline-block;}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{background:none;}
input,button{height:35px;margin:0;padding:6px 12px;border-radius:2px;font-family:inherit;font-size:100%;color:inherit;}
input[disabled],button[disabled]{background-color:#eee;}
input,select{border:1px solid #CCC;width:250px;}
button{color:#FFF;background-color:#428BCA;border:1px solid #357EBD;}
button:hover{background-color:#3276B1;border-color:#285E8E;cursor:pointer;}
.intl-tel-input.outside{border:1px solid #CCC;}
.intl-tel-input.outside input{width:210px;}
.intl-tel-input.outside input[disabled] + .flag-dropdown{background-color:#eee;}
#result{margin-bottom:100px;}

附件:下载该文件资源,减少时间成本(增值服务)