uniapp input 输入框限制只能输入数字和字母
使用组件
<inputFilter :value.sync="data.IDCardNum"></inputFilter>
组件代码
/**
* @Author: 858834013@qq.com
* @Name: inputFilter
* @Date: 2022-07-20
* @Desc: 输入框过滤器 只能输入字母和数字
*/
<template>
<input @input="replaceInput" @confirm="replaceInput" v-model="value2" type="text" placeholder="请填写" placeholder-style="font-size:32rpx;color: #D5D5E0;" />
</template>
<script>
export default {
data() {
return {
value2: ''
}
},
props: {
value: {
type: String,
default () {
return '';
}
},
},
watch: {
value2() {
console.log(this.value2)
this.getInput()
},
value() {
this.value2 = this.value
},
},
mounted() {
this.value2 = this.value
},
methods: {
replaceInput: function(event) {
var that = this;
setTimeout(() => {
that.$emit("update:value", event.target.value.replace(/[^0-9a-zA-Z]/g, ''));
that.value2 = event.target.value.replace(/[^0-9a-zA-Z]/g, '')
}, 10)
},
getInput() {
var that = this;
setTimeout(() => {
that.$emit("update:value", that.value2.replace(/[^0-9a-zA-Z]/g, ''));
}, 10)
}
}
}
</script>