uni-app input设置type='number'，在数字后面输入‘-’号或者‘+’号，失焦时输入框被清空但无显示placeholder

uni-app input设置type=‘number’，在数字后面输入‘-’号或者‘+’号，失焦时输入框被清空但无显示placeholder

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX
3.1.16

示例代码：

<input v-model="mobile" type="number" placeholder="请输入手机号" maxlength="11" [@input](/user/input)="onInput" />

操作步骤：

  1. input设置type=‘number’，
  2. 在@input获取e.detail.value，打印e.detail.value：
  3. 单独输入正负号
  4. 点击框外使输入框失焦
  5. 在数字之后输入正负号：14-2+
  6. 点击框外使输入框失焦

预期结果：

失焦后只清除数字后的正负号，或者在清空后正常显示placeholder

实际结果：

失焦后输入框内容被清空，且无显示placeholder

bug描述：

input设置type=‘number’，在@input获取e.detail.value，获取到的value值为空，但是输入框中内容不变，失焦后内容被清空，但没有显示placeholder：

  1. 单独输入正负号
  2. 在数字之后输入正负号：14-2+

更多关于uni-app input设置type='number'，在数字后面输入‘-’号或者‘+’号，失焦时输入框被清空但无显示placeholder的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app input设置type='number'，在数字后面输入‘-’号或者‘+’号，失焦时输入框被清空但无显示placeholder的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 type="number" 输入框在部分平台下的行为特性。当输入内容不符合数字格式规范时（如单独输入 +、- 或在数字后附加这些符号），系统会判定为无效值，导致 v-model 绑定的数据被置空。失焦时输入框清空内容但未恢复 placeholder 显示，这通常是由于数据绑定值为空且输入框未正确触发重置状态所致。

解决方案：

  1. 改用 type="text" 并自定义验证
    将输入框类型改为文本，通过正则表达式限制输入格式：

    <input v-model="mobile" type="text" placeholder="请输入手机号" maxlength="11" [@input](/user/input)="onInput" />

    onInput(e) {
  // 仅允许数字输入
  this.mobile = e.detail.value.replace(/[^\d]/g, '');
}

  2. 使用 uni-app 的 input 组件替代原生 input
    部分平台（如小程序）对原生 input 支持有限，可尝试使用官方封装组件：

    <uni-easyinput v-model="mobile" type="number" placeholder="请输入手机号" />

  3. 手动控制 placeholder 显示
    通过监听失焦事件强制刷新状态：

    <input v-model="mobile" type="number" :placeholder="showPlaceholder ? '请输入手机号' : ''" [@blur](/user/blur)="onBlur" />

    onBlur() {
  if (!this.mobile) {
    this.showPlaceholder = true;
    // 触发视图更新
    this.$nextTick(() => {
      this.showPlaceholder = false;
    });
  }
}
回到顶部