uni-app APP端input输入框type为number，设置maxlength后输入的数据不正确

uni-app APP端input输入框type为number，设置maxlength后输入的数据不正确

开发环境 版本号 项目创建方式
Windows 10专业版 HBuilderX

测试过的手机

  • 华为麦芒6
  • iphone6plus

操作步骤：

input输入框 type:numbe，maxlength="11"，当输入11位手机号码后，再点击到最前面输入1，此时v-model绑定的数据还是之前的手机号

预期结果：

应返回当前输入的值

实际结果：

返回的还是之前输入的值

bug描述：

一个手机号+验证码登录的功能
input输入框 type:numbe，maxlength=“11”，当输入11位手机号码后，再在最前面输入1，此时v-model绑定的数据还是之前的手机号。
比如：
输入13333333333，然后把光标移动到前面，输入1，input内容变成了11333333333，但此时点击登录按钮，获取到的值还是13333333333

<view class="login-form">  
  <view class="form-row bottom-line">  
    <input v-model="form.phone"  
      class="form-input"  
      :maxlength="11"  
      placeholder-class="placeholder-class"  
      type="number"  
      placeholder="请输入手机号码" />  
  </view>  
  <view class="form-row bottom-line">  
    <input v-model="form.smsCode"  
      class="form-input"  
      :maxlength="6"  
      placeholder-class="placeholder-class"  
      type="number"  
      placeholder="请输入验证码" />  
    <view class="get-sms-button"  
      :class="{disable: getSmsDisable}"  
      [@click](/user/click)="getSms">{{getSmsTips}}</view>  
  </view>  
</view>  
<view class="login-button"  
  [@click](/user/click)="onPhoneLogin">  
  立即登录  
</view>

更多关于uni-app APP端input输入框type为number，设置maxlength后输入的数据不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

相同问题 https://ask.dcloud.net.cn/question/101325

更多关于uni-app APP端input输入框type为number，设置maxlength后输入的数据不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看这个 帖子

这是一个在uni-app中常见的输入框数据绑定问题，特别是在type="number"和maxlength同时使用时容易出现。

问题原因：

  1. type="number"的输入框在达到maxlength限制后，继续输入时不会触发v-model的数据更新
  2. 光标位置变化时，数据绑定可能没有正确同步
  3. 这是uni-app底层对input组件处理的一个已知问题

解决方案：

方案一：使用type="digit"替代type="number"

<input v-model="form.phone" 
  class="form-input"
  :maxlength="11"
  placeholder-class="placeholder-class"
  type="digit"
  placeholder="请输入手机号码" />

方案二：使用@input事件手动更新数据

<input :value="form.phone" 
  class="form-input"
  :maxlength="11"
  placeholder-class="placeholder-class"
  type="number"
  [@input](/user/input)="onPhoneInput"
  placeholder="请输入手机号码" />

// 在methods中
onPhoneInput(e) {
  this.form.phone = e.detail.value
}

方案三：使用正则验证替代type="number"

<input v-model="form.phone" 
  class="form-input"
  :maxlength="11"
  placeholder-class="placeholder-class"
  type="text"
  [@input](/user/input)="validatePhone"
  placeholder="请输入手机号码" />

validatePhone() {
  this.form.phone = this.form.phone.replace(/[^\d]/g, '')
}
回到顶部