美文网首页
h5短信验证码自动填充时总是被复制两遍

h5短信验证码自动填充时总是被复制两遍

作者: 小呆糊总 | 来源:发表于2021-12-24 16:49 被阅读0次
    image.png

    现象:ios、部分安卓系统短信自动填充会复制2次

    原因:是系统bug,复制验证码会触发UITextFieldTextDidChangeNotification监听事件,导致验证码出现了两次。

    解决办法:直接限制input最大输入maxlength=6
    下面是vant的输入框写法

            <van-field
              v-model="mobilePhone"
              error-message="请填写短信验证码"
              class="field"
              required
              center
              clearable
              placeholder="请输入短信验证码"
              :border="false"
              type="digit"
              maxlength=6
            >
    

    如果input框的type=“text” 或者 type=“password”,则可以给input框加上maxLength属性,让最大长度等于验证码的位数。
    如果input框的type=“number”,则可以用如下方法解决:

    <input type="number" oninput="if(value.length>6) value = value.slice(0,6)">
    

    相关文章

      网友评论

          本文标题:h5短信验证码自动填充时总是被复制两遍

          本文链接:https://www.haomeiwen.com/subject/rqalqrtx.html