javascript - vue 移动端的input 数字输入优化
本文介绍了javascript - vue 移动端的input 数字输入优化的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这是移动端使用的,
input type 为number 时 英文或中文都没有限制,而且maxlength不起作用,
input type 为tel 时 英文或中文也都没有限制,但maxlength有作用,所以用tel,
keyup 是为了过滤数字以外的字符。
请问大神这段代码还有没有优化的空间?
<input v-model="phoneNumber" placeholder="输入手机号" type="tel" maxlength="11" @keyup="handleFilterLetters">
<script type="text/javascript">
vm = new Vue({
el: "#app",
data: {
phoneNumber: null,
},
methods: {
handleFilterLetters: function(){
var self = this;
self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');
},
}
})
</script>
解决方案
phoneNumber
初始值应该是字符串的''
,否则对一个可能为 null 的变量调用replace
是不安全的。var self = this
是不必要的。handleFilterLetters
好长啊,改成onKeyUp
不好读一点吗(<input>
一行写的太长了,eslint-airbnb 的规则是
<input
v-model="phoneNumber"
placeholder="输入手机号"
type="tel"
maxlength="11"
@keyup="handleFilterLetters"
/>
这篇关于javascript - vue 移动端的input 数字输入优化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文