h5页面ios验证码无法自动回填到键盘问题
ios系统的h5页面,验证码无法自动回填问题的解决
·
期望效果:收到验证码后,键盘中自动带出验证码(只针对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"
/>
解决:
经过检查是因为验证码框后面跟的是密码框的原因。调整文本框顺序后,可自动回填。
另:
点击回填的验证码时,验证码会出现两次。在验证码框限制字数即可。
更多推荐
已为社区贡献1条内容
所有评论(0)