全部代码可见：（分支为code-login）。

1、进入页面第一个输入框自动聚焦

3、点击输入区域自动聚焦到无值的第一个输入框（当前一个输入框无值时后一个输入框无法聚焦）

5、监听键盘的删除键(Backspace)删除输入的验证码

利用循环渲染4个输入框，第一个输入框可输入最大长度无值时为4（为了复制和验证码填充赋值），有值时最大可输入长度为1。

2、javascript部分：

1）进入页面第一个输入框自动聚焦：

//点击输入区域自动聚焦到空的输入框consthandleFocus=()=>{  if(focusIndex.value===4){    document.querySelectorAll('.uni-input-input')[3].focus();    return; }  document.querySelectorAll('.uni-input-input')[focusIndex.value].focus();}

4）监听粘贴事件赋值给每个输入框，主要是利用给第一个输入框赋值后，然后给剩下的三个输入框重新赋值（短信验证码填充同理）：

//监听输入区域的粘贴事件  document.querySelector('.code-input').addEventListener('paste',(event)=>{    constpasteText=(event.clipboardData||window.clipboardData).getData("text");    constarr=pasteText.split('').filter(item=>/\d/.test(Number(item)));    constnewArr=arr.slice(0,4).map(item=>Number(item));    if(newArr.length){      inputbox[0].labelValue=newArr.join('');   } })//监听第一个输入框的值：为了处理粘贴和短信自动填充时赋值和聚焦watch(()=>inputbox[0].labelValue,(val)=>{  if(val){    //处理输入的时候限制输入长度    isMaxLength.value=false; }  nextTick(()=>{    if(val&&val.length>=2){      val.split('').forEach((element,index)=>{        inputbox[index].labelValue=element;     });   }​    setTimeout(()=>{      //加个定时器避免粘贴两次      handleFocus();   }) })})

注意的是，二次粘贴时需要先重置第一个输入框的最大可输入长度：

//监听键盘上的删除按键(Backspace)consthandleListenDelete=(e)=>{  if(e.keyCode===8&&focusIndex.value>0){    inputbox[focusIndex.value-1].labelValue='';    document.querySelectorAll('.uni-input-input')[focusIndex.value].focus(); }}​onMounted(()=>{document.addEventListener('keydown',handleListenDelete)})

3、完整javascript代码：

四、遇到的问题

1、聚焦实现

document.querySelectorAll('.uni-input-input')[focusIndex.value].focus();

2、循环渲染input的方法，当某个输入框的值改变其它输入框也跟着改变原因是我fill()了一个对象，这种方式相当于四个输入框的值都是同一个对象。

:disabled="item.labelValue||(index>=1&&!inputbox[index-1].labelValue)"

4、ios的safari浏览器中，验证码填充背景颜色会为黄色：（ps:网上有很多种方法：改变背景色，改变阴影填充等，本人试了都不能实现，下面的方法在iphone14ios版本为16.1.1中亲测有效）