<!DOCTYPE html>
<html>
<head>
<title>输入手机号限制长度和增加空格示例</title>
<script type="text/javascript">
function formatPhoneNumber(input) {
// 获取输入框中的内容并去除空格
var phoneNumber = input.value.replace(/\s/g, '');
// 限制输入框中的内容长度为11位
if (phoneNumber.length > 11) {
phoneNumber = phoneNumber.slice(0, 11);
}
// 判断输入框中的内容是否需要添加空格
if (phoneNumber.length > 3 && phoneNumber.length < 8) {
input.value = phoneNumber.slice(0, 3) + ' ' + phoneNumber.slice(3);
} else if (phoneNumber.length >= 8) {
input.value = phoneNumber.slice(0, 3) + ' ' + phoneNumber.slice(3, 7) + ' ' + phoneNumber.slice(7, 11);
} else {
input.value = phoneNumber;
}
}
</script>
</head>
<body>
<label for="phone">请输入手机号：</label>
<input type="text" id="phone" maxlength="13" oninput="formatPhoneNumber(this)">
</body>
</html>上面的代码是一个基于 JavaScript 实现的输入手机号格式化的示例。下面是代码的详细解释：
- 首先在 head 中声明了一个函数 formatPhoneNumber 用于格式化手机号，并在 input 中绑定了该函数的触发事件 oninput。
- 在 formatPhoneNumber 函数中，首先通过 input.value 获取输入框中的内容并去除空格，然后限制输入框中的内容长度为11位，如果超过11位则截取前11位。
- 接着判断输入框中的内容是否需要添加空格。当长度大于3且小于8时，在第3位后添加一个空格；当长度大于等于8时，在第3位和第7位后分别添加一个空格；否则不需要添加空格，直接将输入框中的内容赋值给 input.value。
- 最后，将格式化后的内容赋值给输入框。
该代码的底层原理是通过对 input 元素的 value 属性进行赋值，改变输入框中显示的内容。对于输入框中的内容格式化，则是通过对输入框中的字符串进行切割，并在指定位置插入空格来实现。