zoukankan      html  css  js  c++  java
  • input输入手机号增加空格

    input输入手机号增加空格,点击按钮获取手机号时去掉空格。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>input输入手机号增加空格</title>
    <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
      body{margin: 0;}
      .m-input-wapper{padding: 10px 170px 10px 0;}
      .m-input{margin: 0 0 0 2px; padding: 0 0 0 10px;  100%;height: 60px;line-height: 60px;font-size: 20px; border:1px solid #ddd;}
      .m-search-btn{position: absolute;top: 10px;right: 5px;padding: 0;  146px;line-height: 60px;font-size: 20px; border:1px solid green;}
    </style>
    </head>
    <body>
    <div class="m-input-wapper" id="m-input-wapper">
      <input type="text" class="m-input" id="m-input" maxlength="13">
      <input type="button" class="m-search-btn" id="m-search-btn" value="获取手机号">
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">
      $('#m-input').on('keyup', function () {
        var that = $(this);
        var value = that.val();
        value = value.replace(/[^0-9]/ig, ""); 
        var arr = value.split('');
        if (arr.length >= 4) {
          arr.splice(3, 0, ' ');
        } 
        if (arr.length >= 9) {
          arr.splice(8, 0, ' ');
        }
        value = arr.join('');
        that.val(value);
      });
      $('#m-search-btn').on('click', function () {
        var value = $('#m-input').val();
        value = value.replace(/[^0-9]/ig, ""); 
        console.log(value);
      });
    </script>
    </body>
    </html>





  • 相关阅读:
    第十一章关联容器
    第十章泛型算法
    第九章
    第八章
    阅读记录
    java.lang.Class阅读笔记
    java.time包阅读笔记
    CLion运行多个main函数
    c++中lower_bound和upper_bound中的comp参数
    如何写dfs
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924839.html
Copyright © 2011-2022 走看看