uni-app中input标签的number类型@input事件无法监听键盘的-按下事件

uni-app中input标签的number类型@input事件无法监听键盘的-按下事件

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX
示例代码:

<input type=“digit” class=“w-1 text-22” placeholder=“请输入转入额度” placeholder-class=“color-FFA” v-model=“isponsorAmount” @input=“inputsponsorAmount”>

inputsponsorAmount(e) {  
    console.log(e)
}

操作步骤:

input标签中的number 的 [@input](/user/input)无法监听键盘的 - 按下事件

预期结果:

input标签中的number 的 [@input](/user/input)无法监听键盘的 - 按下事件

实际结果:

input标签中的number 的 [@input](/user/input)无法监听键盘的 - 按下事件

bug描述:

输入框为number类型,点击  ‘-’ 号,可以输入,[@input](/user/input)方法不会触发

更多关于uni-app中input标签的number类型@input事件无法监听键盘的-按下事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中input标签的number类型@input事件无法监听键盘的-按下事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中,type="digit"type="number" 的 input 组件在部分平台(尤其是 iOS 系统)上,当输入负号(-)时,确实可能不会触发 [@input](/user/input) 事件。这是因为平台原生的数字输入键盘对负号的处理逻辑与常规字符不同,导致事件未被正常捕获。

原因分析:

  1. 平台差异:不同操作系统(iOS/Android)和 WebView 对数字输入框的键盘和输入事件处理机制存在差异。
  2. 输入限制digitnumber 类型会限制输入内容为数字或特定字符(如小数点),负号可能被视为非标准输入,导致事件触发异常。
  3. 键盘行为:在数字键盘上按下负号时,部分系统可能先执行输入验证,若验证不通过(如不允许负数),则不会触发输入事件。

解决方案:

  1. 使用 type="text" 并自定义输入验证
    将 input 类型改为 text,通过 [@input](/user/input) 事件手动过滤非数字字符(允许负号和小数点),实现类似数字输入的效果:

    <input type="text" v-model="isponsorAmount" [@input](/user/input)="handleInput">
    
    handleInput(e) {
      let value = e.detail.value;
      // 允许数字、负号、小数点
      value = value.replace(/[^\d.-]/g, '');
      // 限制负号只能出现在首位
      if (value.indexOf('-') > 0) {
        value = value.replace(/-/g, '');
      }
      // 限制多个小数点
      const parts = value.split('.');
      if (parts.length > 2) {
        value = parts[0] + '.' + parts.slice(1).join('');
      }
      this.isponsorAmount = value;
    }
    
  2. 监听键盘事件
    结合 @keypress[@keydown](/user/keydown) 事件捕获负号输入(注意:在移动端键盘事件支持可能有限):

    <input type="digit" v-model="isponsorAmount" [@input](/user/input)="onInput" [@keydown](/user/keydown)="onKeyDown">
    
    onKeyDown(e) {
      if (e.key === '-') {
        console.log('负号被按下', e);
        // 手动处理负号逻辑
      }
    }
回到顶部