uniapp中input框的type="number",在ios中调用第三方键盘还是可以输入其他字符,handleInput(event) { // 过滤非数字字符 const value = event.target.value.replace(/[^\d]/g, '') // 更新 input 的值 event.target.value = value // 更新组件的数据 this.value = value } 用这种方法可以过滤掉非数字的字符, 但是当限制input长度时(比如限制长度为10),如果先输入一位数字(1),再接着一直输入字母直到长度达到限制长度(1qqqqqqqqq),这个时候input自带属性已经检测到输入的长度为10,但是页面上因为过滤掉了非数字,所以不显示,然后再输入数字就无法接着输入,这问题怎么解决
时间: 2024-02-18 15:01:11 浏览: 149
完美解决input[type=number]无法显示非数字字符的问题
你可以在输入框外面再包裹一层 div 或者其他标签,并设置其样式为 `overflow: hidden`,这样可以让输入框输入的内容超出限制长度时被隐藏,而不会影响到后续的输入。同时,你需要在输入框的 `input` 事件中监听输入框的值的变化,当其长度超出限制时,手动截取输入框的值,从而避免因为过滤非数字字符而导致的输入框无法继续输入数字的问题。下面是一个示例代码:
```
<template>
<div class="input-wrapper">
<input type="number" v-model="value" @input="handleInput" />
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
handleInput(event) {
let value = event.target.value
// 截取输入框的值,以避免因过滤非数字字符而导致无法继续输入数字的问题
if (value.length > 10) {
value = value.slice(0, 10)
event.target.value = value
}
// 过滤非数字字符
value = value.replace(/[^\d]/g, '')
// 更新组件的数据
this.value = value
}
}
}
</script>
<style scoped>
.input-wrapper {
overflow: hidden;
}
</style>
```
阅读全文