期望效果:收到验证码后,键盘中自动带出验证码(只针对ios系统)

 

背景:

h5页面有通过手机号验证码实现忘记密码功能。但是验证码的文本框聚焦时,键盘中并没有回填收到验证码。最开始代码如下:

<!--验证码框-->
<van-field ref="code"
    v-model="form.authCode"
    center
    placeholder="请输入验证码"
    maxlength="6"
    :border="false"
    :left-icon="require('../assets/shield.png')"
    :rules="[{ required: true, message: '' }]"
>
    <template #button>
      <div class="btn_text" :class="{'send': gettingCode}" @click="getCode">
          {{ codeText }}                
      </div>
    </template>
</van-field>

<!--密码框-->
<van-field
    v-model="form.newPassword"
    placeholder="请输入8-23位数字和字母组合密码"
    :border="false"
    :rules="[{ pattern: pwdPattern, required: true, message: '' }]"
    :left-icon="require('../assets/pwd-confirm.png')"
    :right-icon="pwdNew ? 'eye-o' : 'closed-eye'"
    :type="pwdNew ? 'text' : 'password' "
    @click-right-icon="pwdNew=!pwdNew"
/>

解决:

经过检查是因为验证码框后面跟的是密码框的原因。调整文本框顺序后,可自动回填。

另:

点击回填的验证码时,验证码会出现两次。在验证码框限制字数即可。

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐