vue ivew的input type=“number” 只能输入数字,解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法
input type="number"很重要,防止中文输入法输入出现错误问题,如果右侧上下箭头没有去掉,请试着加下/deep/如果获取不到event,请试下$event。
·
方法挺简单的
<template>
<Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa" :maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa(event)">
<span slot="prepend">微信</span>
</Input>
</template>
<script>
export default {
data () {
return {
value: ''
}
},
methods:{
changeaa(event){
//禁止非数字字符输入
if(event.keyCode<48||event.keyCode>57)event.returnValue=false;
}
}
}
</script>
<style>
.aaaa input::-webkit-outer-spin-button,
.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.aaaa input[type="number"] {
-moz-appearance: textfield;
}
</style>
input type="number"很重要,防止中文输入法输入出现错误问题,如果右侧上下箭头没有去掉,请试着加下/deep/
/deep/.aaaa input::-webkit-outer-spin-button,
/deep/.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/.aaaa input[type="number"] {
-moz-appearance: textfield;
}
如果获取不到event,请试下$event
<template>
<Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa" :maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa($event)">
<span slot="prepend">微信</span>
</Input>
</template>
更多推荐
已为社区贡献3条内容
所有评论(0)