input手机号输入框
时间: 2023-11-07 22:16:38 浏览: 128
可以通过以下代码实现一个带有手机号格式化的输入框:
```html
<!DOCTYPE html>
<html>
<head>
<title>输入手机号限制长度和增加空格示例</title>
<script type="text/javascript">
function formatPhoneNumber(input) {
var phoneNumber = input.value.replace(/\s/g, ''); // 获取输入框中的手机号并去除空格
if (phoneNumber.length > 11) {
phoneNumber = phoneNumber.slice(0, 11); // 限制手机号长度为11位
}
if (phoneNumber.length > 3 && phoneNumber.length < 8) {
input.value = phoneNumber.slice(0, 3) + ' ' + phoneNumber.slice(3); // 在第3位后添加一个空格
} else if (phoneNumber.length >= 8) {
input.value = phoneNumber.slice(0, 3) + ' ' + phoneNumber.slice(3, 7) + ' ' + phoneNumber.slice(7, 11); // 在第3位和第7位后分别添加一个空格
} else {
input.value = phoneNumber;
}
}
</script>
</head>
<body>
<label for="phone">请输入手机号:</label>
<input type="text" id="phone" maxlength="13" oninput="formatPhoneNumber(this)">
</body>
</html>
```
这段代码使用了JavaScript来实现手机号的格式化。在输入框的`oninput`事件中,调用了`formatPhoneNumber`函数。该函数首先获取输入框中的手机号,并去除空格。然后限制手机号的长度为11位,超过11位则截取前11位。接下来判断手机号的长度是否需要添加空格,当长度大于3且小于8时,在第3位后添加一个空格;当长度大于等于8时,在第3位和第7位后分别添加一个空格;否则不需要添加空格,直接将手机号赋值给输入框的`value`属性。最后,将格式化后的手机号赋值给输入框。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue实现数字输入框中分割手机号码的示例](https://download.csdn.net/download/weixin_38655309/13974134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [输入框输入手机号,中间插入空格格式化,且限制11位](https://blog.csdn.net/qq_36777143/article/details/129521160)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文