input输入手机号增加空格

徐同保

已于 2023-07-26 15:36:59 修改

阅读量3.6k

点赞数

分类专栏： web前端前端技术分享文章标签： input

于 2018-07-13 09:44:48 首次发布

本文链接：https://blog.csdn.net/xutongbao/article/details/81026302

版权

web前端同时被 2 个专栏收录

735 篇文章 14 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

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; width: 100%;height: 60px;line-height: 60px;font-size: 20px; border:1px solid #ddd;}
  .m-search-btn{position: absolute;top: 10px;right: 5px;padding: 0; width: 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>

js 每间隔4个字符加空格

var str = '20191202113759'; 

var str=str.replace(/\s/g,'').replace(/(.{4})/g,"$1 ");

console.log(str);  //2019 1202 1137 59

https://blog.csdn.net/qq_37034928/article/details/103346007

徐同保

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
input输入手机号增加空格

input输入手机号增加空格，点击按钮获取手机号时去掉空格。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;input输入手机号增加空格&lt;/title&gt;&lt;meta name="viewp
复制链接

扫一扫