h5页面ios验证码无法自动回填到键盘问题

期望效果：收到验证码后，键盘中自动带出验证码（只针对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"
/>

解决：

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

另：

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