uni-app input 输入框type类型为number时，无法清除显示数据【 +-. 】

uni-app input 输入框type类型为number时，无法清除显示数据【 ±. 】

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

<input type="number"  @input="phone" maxlength="11" placeholder="输入手机号" placeholder-style="color:#BBBBBB" v-model="repData.phone" />  

input输入框 number类型，在监听phone中：  
methods: {  
            phone(e){  
                console.log("phone ",e)  
                setTimeout(()=>{  
                    this.repData.phone = '';  
                    console.log("update phone ",this.repData.phone)  
                },0)  
            },  
}

预期结果：

  • input 中显示的内容为空，存储的数据内容已经没有数据了

实际结果：

  • input 中显示的内容还是 ±. ，存储的数据内容已经没有数据了

bug描述：

<input type="number"  @input="phone" maxlength="11" placeholder="输入手机号" placeholder-style="color:#BBBBBB" v-model="repData.phone" />  

input输入框 number类型，在监听phone中：  
methods: {  
            phone(e){  
                console.log("phone ",e)  
                setTimeout(()=>{  
                    this.repData.phone = '';  
                    console.log("update phone ",this.repData.phone)  
                },0)  
            },  
}

无法清除 ±. 这些符号


更多关于uni-app input 输入框type类型为number时，无法清除显示数据【 +-. 】的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

自己顶一下

更多关于uni-app input 输入框type类型为number时，无法清除显示数据【 +-. 】的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一毛一样的问题。 求解

这是一个已知的uni-app在number类型input上的问题。当type="number"时，input框会默认显示+/-/.等符号，即使用代码清空value后，这些符号仍然会保留。

解决方法有以下几种：

  1. 改用type=“digit”（仅允许数字和小数点）或type="text"配合正则校验：
<input type="digit" pattern="[0-9]*" [@input](/user/input)="phone" />
  1. 使用条件渲染强制重新渲染input：
<input v-if="showInput" type="number" />
// 清空时
this.showInput = false;
this.$nextTick(() => {
    this.showInput = true;
});
  1. 使用text类型配合input事件处理：
<input type="text" [@input](/user/input)="handlePhoneInput" />

handlePhoneInput(e) {
    this.repData.phone = e.detail.value.replace(/[^0-9]/g, '');
}
回到顶部