vue input框只能输入数字、小数点并限制长度
今天在写代码时遇到一些问题,input的type属性值为number时,maxlength的设置会失效,type属性值为text时,又无法满足input只能输入数字的限制,找到的解决方法如下:<form v-for="(item,index) in list" :key='item.id'><inputtype="text"placeholder="请输入数量"v-model="
·
今天在写代码时遇到一些问题,input
的type
属性值为number
时,maxlength
的设置会失效,type
属性值为text
时,又无法满足input
只能输入数字的限制,找到的解决方法如下:
1、只能输入数字和小数点
@keyup="val.num = val.num.replace(/[^\d.]/g,'')"
具体内容:
<form v-for="(val,index) in list" :key='val.id'>
<input
type = "text"
placeholder = "请输入数量"
v-model = "val.num"
maxlength = "7"
@keyup = "val.num = val.num.replace(/[^\d.]/g,'')"
/>
</form>
2、只能输入一个小数点,当第二位不是'.'
时,首位不能为0
2.1 限制一个小数点
val.num= val.num
.toString().//replace()方法是字符串方法
.replace(/\.{2,}/g,'.')
.replace('.','$#$')
.replace(/\./g,'')
.replace('$#$','.')//只能输入一个小数点
2.2 首位不能为0
if(val.num.length > 1 && val.num.substr(0,1) ==0 && val.num.substr(1,1) !='.'){
val.num= val.num.substr(1,1)
}
2.3、首位不为点
方法一:
if(val.num.substr(0,1) == '.'){
val.num=""
}
方法二:
if(val.num.indexOf(".") <= 0 && val.num!= ''){
val.num= parseFloat(val.num)
}
2.4、限制小数点的位数(3位为例)
val.num= val.num
.toString()
.replace(/^()*(\d+)\.(\.?\d\d\d).*$/,'$2$2.$3')
//d有几个就是几位小数
更多推荐
所有评论(0)