uni-app input type=number 负号不触发input事件

uni-app input type=number 负号不触发input事件

开发环境 版本号 项目创建方式
Mac 11.5.2 HBuilderX

示例代码：

<input type="number" [@input](/user/input)="onInput" v-model="meter"/>  

onInput(event) {  
  // 输入负号，不能触发这个方法  
},
4 回复

android，H5 负号都不触发
ios键盘没有负号

更多关于uni-app input type=number 负号不触发input事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


因为仅有-不是number 得加上数值才构成number

什么是input，就是不管我输入什么，都得给我回馈。组件直接给我处理了，那叫input事件嘛？

在 uni-app 中，input 元素设置 type="number" 时，输入负号（-）确实可能不会立即触发 input 事件。这是因为浏览器的数字输入框在处理负号时，通常需要先输入数字，负号才会被识别为有效输入（例如输入“-5”）。如果只输入“-”，输入框的值可能为空或无效，因此不会触发事件。

解决方案：

  1. 使用 type="text" 并添加数字验证：将 type 改为 text，通过 [@input](/user/input) 事件用正则表达式过滤非数字和负号字符，确保输入内容为数字（包括负数）。例如：
    <input type="text" [@input](/user/input)="onInput" v-model="meter" />

    onInput(event) {
  // 只允许数字和负号，且负号只能在开头
  let value = event.detail.value;
  value = value.replace(/[^0-9-]/g, '');
  if (value.indexOf('-') > 0) {
    value = value.replace(/-/g, '');
  }
  this.meter = value;
}
  2. 结合 [@keypress](/user/keypress) 事件：监听键盘输入，在输入负号时手动处理。例如：
    <input type="number" [@keypress](/user/keypress)="onKeyPress" [@input](/user/input)="onInput" v-model="meter" />

    onKeyPress(event) {
  if (event.key === '-') {
    // 手动触发处理逻辑
    this.handleNegativeInput();
  }
}
  3. 使用 watch 监听数据变化：通过 watch 监听 meter 的值变化，即使 input 事件未触发，也能捕获数据更新。例如：
    watch: {
  meter(newVal) {
    console.log('值变化:', newVal);
  }
}
回到顶部