uni-app input组件在收到短信验证码后显示错误

uni-app input组件在收到短信验证码后显示错误

产品分类

  • uniapp/H5

PC开发环境操作系统

  • Windows

PC开发环境操作系统版本号

  • 10

HBuilderX类型

  • 正式

HBuilderX版本号

  • 3.2.9

浏览器平台

  • Chrome

浏览器版本

  • 最新的

项目创建方式

  • HBuilderX

bug描述

  • input 在收到短信验证码后 默认 点击 输入法内提示的 数字,点击后会生成2次。比如 6189 点击输入法提示的 6189 会在输入框内变成 61896189
  • 还有 在前几天更新的最新版的hbuilder里发现 发布到H5的时候网站标题 每次都要修改,他不会引用H5配置里的标题

更多关于uni-app input组件在收到短信验证码后显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

没有示例代码猜不出来你那边发生了什么。 报bug的正确姿势:https://ask.dcloud.net.cn/article/38139

更多关于uni-app input组件在收到短信验证码后显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还有发行到H5的时候 哪有什么代码啊 那个网站标题 每次都要重新填,之前不是调用H5配置里的标题的吗 新版的没有调佣

我可以拍个视频给你看,你就明白了 这没有代码 不是写什么代码的错误

把你邮箱留下 我拍的视频发给你

<u-form-item label="验证码"> <u-input v-model="formData.sms_code" type="number" placeholder="请填写验证码" /> <app-code-send :phone="formData.phone"></app-code-send> </u-form-item> 就这一行代码啊 收到验证码以后 点击表单 会弹出输入法,输入法顶部就会有收到的验证码数字,一点击这个数字,就会自动填进表单,但是会填2次,这没有代码 都是输入法自带的啊

没有示例代码猜不出来你那边发生了什么。 报bug的正确姿势:https://ask.dcloud.net.cn/article/38139

回复 8***@qq.com: 这个是 我演示的视频,就是输入验证码 发来的验证码 一点 会自动输入两次

回复 8***@qq.com: 提供你这个页面的代码

回复 8***@qq.com: 你是一直要我们去猜你那边到底是什么问题,提供的代码就一个页面然后你的组件u-input里面具体是啥根本就无法了解。就像找医生看病一直不给把脉怎么给你治

回复 DCloud_uniCloud_JSON: 你先看这个 https://kingeleventest.oss-cn-beijing.aliyuncs.com/view/661014e895caf5b632f5880cbe9bc0ae.mp4 这个是打包的问题 表单的问题 我明天整理一个 最简单的 演示复现

在uni-app中,input组件在收到短信验证码后点击输入法提示的数字导致重复输入的问题,通常与输入事件处理和自动填充机制有关。以下是可能的原因和解决方案:

  1. 输入事件重复触发:可能是@input@confirm事件被多次触发。建议检查事件绑定逻辑,确保没有重复监听。可以尝试使用.once修饰符或手动解绑事件。

  2. 自动填充冲突:浏览器的自动填充功能可能与uni-app的输入处理冲突。可以尝试在input组件上添加autocomplete="off"属性,但注意现代浏览器可能忽略此设置。作为替代,可以设置autocomplete="one-time-code",这专门用于验证码场景,可能减少冲突。

  3. 数据绑定问题:检查v-model绑定的数据是否在事件中被重复赋值。确保在输入事件中不要多次更新同一个值。

  4. 输入法兼容性:某些输入法(尤其是Android上的)可能对数字输入有特殊处理。可以尝试监听@blur事件来验证并修正输入值。

  5. 临时解决方案:在点击输入法提示时,通过@input事件即时验证输入长度,如果超过预期长度(如4位),则自动截断。例如:

    handleInput(e) {
      let value = e.detail.value;
      if (value.length > 4) { // 假设验证码为4位
        this.code = value.slice(0, 4);
      }
    }
回到顶部