input 表单输入手机号过滤一切非数字的内容
2020-06-23 本文已影响0人
前端_Fn
平时中我们可能会遇到这样的一个需求，当用户输入 input 表单时，要求表单只能输入手机号，只能输入数字，过滤一切其他的内容。
gif5新文件.gif
下面有几个常见的解决方案
方案一：H5，直接禁用输入其他字符
<input type="number" value="data.value" />
<!-- Vue -->
<input type="number" v-model="data.value" />
方案二：js，使用 replace 替换为 '' 字符串
<body>
<input type="text" value="data.value" />
<!-- Vue -->
<input type="text" v-model="data.value" @keyup="data.phone ? data.value = data.value.replace(/[^\d\.]/g,'') : null" />
</body>
<script>
// javascript
let input = document.querySelector('input');
input.onkeyup = () => {
data.value = data.phone ? op.value.f_t = op.value.f_t.replace(/[^\d\.]/g,'') : null"
}
</script>
如果需要兼容其他的设备或者浏览器请用方案二，否则方案一。
如有其他，欢迎分享！
