uni-app input标签type=number时 输入" - "负号后@input监听不到等BUG
uni-app input标签type=number时 输入" - "负号后@input监听不到等BUG
操作步骤：
- 输入" - “负号后连续输入其他数字，然后清空内容后，重新输入” - "负号就会出现粘贴上次输入内容效果
预期结果：
- v-model绑定的变量值实际不为空
实际结果：
- v-model绑定的变量值实际为空
bug描述：
- input标签type=number的情况下，输入" - "负号后@input监听不到
- 输入" - “负号后连续输入其他数字，然后清空内容后，重新输入” - "负号就会出现粘贴上次输入内容效果，但v-model绑定的变量值实际为空
- 输入第一次" - “负号后，input内容为“ - ”，接着再次输入” - "，则input又为空
- 在所有机型，H5上都有这种情况
图片
附件
7 回复
在使用 uni-app 开发时，如果你在 input 标签中设置了 type="number"，并且希望在输入负号时能够监听到输入事件，可能会遇到一些问题。这是因为 input 标签的 type="number" 在某些情况下对负号的处理方式与普通文本输入不同。
问题描述
当 input 的 type="number" 时，输入负号 - 时，@input 事件可能不会触发，或者触发时获取到的值不正确。这是因为浏览器在处理 type="number" 的输入框时，会先验证输入的内容是否符合数字格式，如果不符合，可能会忽略或阻止输入。
解决方案
1. 使用 type="text" 并手动验证数字
如果你需要处理负号，并且不依赖 type="number" 的默认行为，可以将 type 设置为 text，然后手动验证输入内容是否为数字。
<template>
<input type="text" v-model="inputValue" @input="handleInput" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(event) {
const value = event.target.value;
// 手动验证是否为数字（包括负号）
if (/^-?\d*\.?\d*$/.test(value)) {
this.inputValue = value;
} else {
// 如果不符合数字格式，可以清空或保留上一次的有效值
this.inputValue = this.inputValue;
}
}
}
};
</script>2. 使用 type="number" 并监听 @change 事件
如果你仍然希望使用 type="number"，可以尝试监听 @change 事件，而不是 @input 事件。@change 事件在输入框失去焦点时触发，可能会更可靠地获取到最终的值。
<template>
<input type="number" v-model="inputValue" @change="handleChange" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleChange(event) {
this.inputValue = event.target.value;
}
}
};
</script>3. 使用 [@keydown](/user/keydown) 事件监听负号输入
你还可以通过监听 [@keydown](/user/keydown) 事件来捕获负号的输入，并在事件处理函数中手动处理。
<template>
<input type="number" v-model="inputValue" [@keydown](/user/keydown)="handleKeydown" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleKeydown(event) {
if (event.key === '-') {
// 手动处理负号输入
this.inputValue = '-' + this.inputValue;
}
}
}
};
</script>