input 输入手机号增加空格 - 话题

PHP学院的中学生 2022-09-27 15:47:43 1004次浏览 0条回复 0 0 0

<!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>

没有找到数据。

您需要登录后才可以回复。登录 | 立即注册

副总裁

PHP学院的中学生

注册时间：2018-10-23
最后登录：2024-09-23
在线时长：168小时13分

粉丝29
金钱4725
威望30
积分6705

input 输入手机号增加空格 [ 新手入门 ]

共 0 条回复

回复话题

PHP学院的中学生

热门话题