🐽 H5手机号自动调整格式

在日常工作或者开发中，难免会遇到手机号输入的案例，一起看看吧....
html
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>微信支付</title>
	<!-- <link rel="stylesheet" href="./css/reset.css"> -->
</head>

<body>
	<div id="main">
		<header>
			xxxx
		</header>
		<main>
			<div class="iptBox">
				<input type="text" placeholder="请输入您的充值账号!" id="ipt">
				<div class="info">
					<span class="errTip"></span>
				</div>
			</div>
		</main>
		<footer>
			<button id="payBtn">支付</button>
		</footer>
	</div>
	<script>
		const waitDuration=500;
		//获取dom节点,为按钮绑定点击事件(加入节流功能函数)
		var payBtn = document.querySelector('#payBtn');
		var telPhoneVal=document.querySelector('#ipt');
		var errTip=document.querySelector('.errTip');
		//定义两个缓存值
		var firstLen = 0;
        var lastLen = 0;
        var reg = /^1(3|4|5|7|8)\d{9}$/;
		payBtn.addEventListener("click", clickFn(clickEvent, waitDuration));

		// 节流功能函数,防止用户多次触发
		function clickFn(fn, delay) {
			let timer;
			return function () { // 这里是标签的点击事件调用该匿名函数，所以该匿名函数指向<button id="clickEventDom">点击</button>
				if (timer) {
					return;
				}
				let that = this;
				let arg = arguments;
				timer = setTimeout(function () {
					fn.apply(that, arg);
					timer = null;
				}, delay)
			}
		};

		// 支付函数,以下为支付业务功能代码
		function clickEvent() {
			console.log('支付功能');
			window.location.href='./success.html';
		};

		// 手机号验证
		telPhoneVal.oninput = function () {
            telPhoneVal.value = telPhoneVal.value.substr(0, 13); //只允许输入11位+2个空格
            //用户输入满11位开始验证
            if (telPhoneVal.value.length == 13) {
                //将数据去掉空格后验证
                if (!reg.test(telPhoneVal.value.replace(/\s/g, ''))) {
                    errTip.innerHTML = '*'+' '+'您输入的手机账号有误,请重新输入'
                } else {
                    errTip.innerHTML = ''
                }
            } else {
                errTip.innerHTML = ''
            }
        };
		// 手机号四位分割
        telPhoneVal.onfocus = function () {
            timer = setInterval(function () {
                lastLen = telPhoneVal.value.length;
                if (lastLen > firstLen) {
                    firstLen = telPhoneVal.value.length;
                    if (lastLen === 4 || lastLen === 9) {
                        var temp1 = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
                        var temp2 = telPhoneVal.value.substr(telPhoneVal.value.length - 1);
                        telPhoneVal.value = temp1 + ' ' + temp2;
                    }
                } else if (lastLen <= firstLen) {
                    if (lastLen === 4 || lastLen === 9) {
                        telPhoneVal.value = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
                    }
                    firstLen = telPhoneVal.value.length;
                }
            }, 10); //如果手机出现卡顿，可适当把定时器时间加大
        }
	</script>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		body,
		html {
			width: 100%;
			height: 100%;
		}
		
		#main {
			width: 100%;
			height: 100%;
			background-color: #f2f2f2;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			flex-direction: column;
		}

		header {
			height: 26px;
			width: 100%;
			background-color: #f2f2f2;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			font-family: 'Courier New', Courier, monospace;
			color: #333;
			font-weight: bolder;
		}

		main {
			flex: 1;
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			background: #fff;
		}
		.iptBox{
			display: flex;
			height: 22%;
			width: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.iptBox input{
			display: inline;
			height: 50px;
			width: 80%;
			outline: none;
			border: none;
			border-bottom: 1px solid #a8a8a8;
			font-size: 26px;
			font-weight: bolder;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}
		.info{
			width: 80%;
			margin: 0 auto;
			height: 40px;
			margin-top: 5px;
			color: #f55c64;
			font-size: 13px;
		}

		footer {
			height: 50px;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.4);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		button {
			width: 140px;
			line-height: 38px;
			text-align: center;
			font-weight: bold;
			color: #fff;
			text-shadow: 1px 1px 1px #333;
			border-radius: 5px;
			position: relative;
			overflow: hidden;
			border: 1px solid #64c878;
			box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
			background: -webkit-linear-gradient(top, #90dfa2, #84d494);
			background: -moz-linear-gradient(top, #90dfa2, #84d494);
			background: linear-gradient(top, #90dfa2, #84d494);
		}

		button:hover {
			background: -webkit-linear-gradient(top, #aaebb9, #82d392);
			background: -moz-linear-gradient(top, #aaebb9, #82d392);
			background: linear-gradient(top, #aaebb9, #82d392);
		}
	</style>
</body>

</html>
alt 示例图片
好了，以上的总结就到此为止了，如果有疑问可以不问也可以联系作者。咱们下期再见! Good bye! 🌸
🐽 H5手机号自动调整格式 ​

🐽 H5手机号自动调整格式
