需求：手机号码格式为344分段式，即156 5555 6666
实现方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<script src="./js/rem.js"></script>
<script src="./js/jquery-3.3.1.min.js"></script>
<title>手机号344分段格式</title>
<style>
* {
font-size: 0.28rem;
}
::-webkit-input-placeholder {
color: #c1c1c1;
}
/* Firefox版本4-18 */
:-moz-placeholder {
color: #c1c1c1;
}
/* Firefox版本19+ */
::-moz-placeholder {
color: #c1c1c1;
}
/* IE浏览器 */
:-ms-input-placeholder {
color: #c1c1c1;
}
input {
outline: none;
}
#form {
width: 7.5rem;
max-width: 750px;
background: #fff;
height: 100vh;
margin: 0 auto;
}
.form_list {
width: 100%;
padding: 0.3rem;
box-sizing: border-box;
}
.form_item {
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0;
border-bottom: 0.01rem solid #f6f6f6;
box-sizing: border-box;
}
.form_item lable {
display: inline-block;
width: 2.4rem;
height: 100%;
font-size: 0.28rem;
}
.form_item input {
width: calc(100% - 2.4rem);
height: calc(100% - 0.01rem);
font-size: 0.28rem;
padding: 0.35rem 0;
box-sizing: border-box;
border: none;
vertical-align: top;
text-align: right;
}
</style>
</head>
<body>
<div id="form">
<ul class="form_list">
<li class="form_item mobile">
<lable>非分段式手机号码</lable>
<input maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入手机号" type="text" />
</li>
<!--分段式手机号码1用户体验不好-->
<li class="form_item mobile">
<lable>分段式手机号码1</lable>
<input maxlength="13" onkeyup="this.value=this.value.replace(/\D/g,'').replace(/(?=(\d{4})+$)/g, ' ')"
placeholder="请输入手机号" type="text" />
</li>
<!--代码没3简洁-->
<li class="form_item mobile">
<lable>分段式手机号码2</lable>
<input id="uphone" type="tel" pattern="[0-9]*" maxlength="13" autocomplete="off" value="" placeholder="请输入手机号"
oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false" />
</li>
<li class="form_item mobile">
<lable>分段式手机号码3</lable>
<input id="input3" onkeyup="this.value=this.value.replace(/[^\d\s]/g,'')" placeholder="请输入手机号" type="tel" />
</li>
<li class="form_item mobile">
<lable>分段式手机号码4</lable>
<input maxlength="13" onkeyup="this.value=this.value.replace(/[^\d]/g,'').replace(/(^\d{3}|\d{4}\B)/g,'$1 ')" placeholder="请输入手机号" type="tel" />
</li>
</ul>
</div>
<script>
/**
* 分段式手机号码2
*/
$("#uphone").on("input propertychange", function () {
var uphone = $(this).val();
$(this).val(formatPhone(uphone));
moveEnd($(this)[0]);
});
function formatPhone(phone_num) {
var valueStr = phone_num.replace(/\D/g, "").substr(0, 11);
var len = valueStr.length;
if (len > 3 && len < 8) {
return valueStr.substr(0, 3) + " " + valueStr.substr(3);
} else if (len >= 8) {
return valueStr.substr(0, 3) + " " + valueStr.substr(3, 4) + " " + valueStr.substr(7);
}
return valueStr;
};
//在部分安卓机上input的光标会在添加空格后错位，需要这个方法主动将光标放置在最后
function moveEnd(obj) {
//通过是否支持createTextRange判断是否是IE
if (obj.createTextRange) {
var rg = obj.createTextRange();
rg.collapse(false);
rg.select();
} else {
setTimeout(function () {
var len = obj.value.length;
obj.setSelectionRange(len, len);
}, 20);
}
};
/**
* 分段式手机号码3
*/
$('#input3').on("input", function () {
let str = this.value.toString().replace(/ /g, '');
let len = str.length;
switch (true) {
case len > 11:
str = str.substr(0, 3) + ' ' + str.substr(3, 4) + ' ' + str.substr(7, 4);
this.value = str;
break;
case len > 7:
str = str.substr(0, 3) + ' ' + str.substr(3, 4) + ' ' + str.substr(7);
this.value = str;
break;
case len > 3:
str = str.substr(0, 3) + ' ' + str.substr(3);
this.value = str;
break;
default:
this.value = str;
}
});
</script>
</body>
</html>
推荐：方法3和方法4
网友评论