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>





  • 相关阅读:
    Spark:The Definitive Book第十四章笔记
    Spark:The Definitive Book第十三章笔记
    Spark:The Definitive Book第十二章笔记
    Spark:The Definitive Book第十一章笔记
    Spark:The Definitive Book第十章笔记
    Spark:The Definitive Book第九章笔记
    Spark:The Definitive Book第八章笔记
    Spark:The Definitive Book第七章笔记
    QRTest
    flutter笔记
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924839.html
Copyright © 2011-2022 走看看