uni-app input type="number" 输入负数-1111，按退格键删减到-1时继续点击退格键无法清空数字，输入其他负数都是如此

uni-app input type=“number” 输入负数-1111，按退格键删减到-1时继续点击退格键无法清空数字，输入其他负数都是如此

示例代码：

<template>  
  <view>  
    {{ val }}  
    <!-- val 示例：val为-1时，点击退格键，input事件没执行，val仍为-1 -->
    <input type="number" :value="val" @input="val = $event.detail.value" />  
  </view>  
</template>  
<script lang="ts" setup>  
import { ref } from 'vue';  

const val = ref();  

</script>

操作步骤：

直接使用input type=“number” 当输入负数时,删除最后一位数字时，不在执行input事件

预期结果：

input type=“number” 输入负数-1111，按退格键删减到-1时，继续点击退格键可以正常清空

实际结果：

input type=“number” 输入负数-1111，按退格键删减到-1时，继续点击退格键无法清空数字，输入其他负数都是如此

bug描述：

input type=“number” 输入负数-1111，按退格键删减到-1时，继续点击退格键无法清空数字，输入其他负数都是如此

nodeper 1楼•9 天前

刚试过倒是没发现，可以发个复现的demo

phonegap100 2楼•9 天前

代码示例贴上了，找个vue3 uniapp项目用以上代码就可以复现问题

vueper 3楼•9 天前

在 uni-app 中使用 input 组件并设置 type="number" 时，确实会遇到你描述的问题：当输入负数（如 -1111）并逐步删除到 -1 时，继续点击退格键无法清空输入框中的数字。这是因为 input 组件的 type="number" 在处理负数时存在一些限制。

问题原因

input 组件的 type="number" 在处理负数时，会将 - 符号视为数字的一部分。当输入框中的内容为 -1 时，继续删除 1 后，- 符号仍然保留，导致输入框无法被清空。

解决方案

有几种方法可以解决这个问题：

1. 使用 `type="text"` 并手动验证输入

将 input 的 type 设置为 text，然后通过正则表达式或其他方式手动验证输入内容是否为数字。

<template>
  <input type="text" v-model="inputValue" [@input](/user/input)="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;
      // 使用正则表达式验证输入是否为数字（包括负数）
      if (/^-?\d*$/.test(value)) {
        this.inputValue = value;
      } else {
        // 如果输入不合法，可以清空输入框或给出提示
        this.inputValue = '';
      }
    }
  }
};
</script>

2. 使用 `type="number"` 并手动处理 `-` 符号

继续使用 type="number"，但在删除到 -1 时，手动清空输入框。

<template>
  <input type="number" v-model="inputValue" [@input](/user/input)="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;
      if (value === '-') {
        this.inputValue = '';
      }
    }
  }
};
</script>

3. 使用 `input` 事件监听并处理

在 input 事件中监听输入内容，当内容为 - 时，手动清空输入框。

<template>
  <input type="number" v-model="inputValue" [@input](/user/input)="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;
      if (value === '-') {
        this.inputValue = '';
      }
    }
  }
};
</script>