全部代码可见:(分支为code-login)。
1、进入页面第一个输入框自动聚焦
3、点击输入区域自动聚焦到无值的第一个输入框(当前一个输入框无值时后一个输入框无法聚焦)
5、监听键盘的删除键(Backspace)删除输入的验证码
利用循环渲染4个输入框,第一个输入框可输入最大长度无值时为4(为了复制和验证码填充赋值),有值时最大可输入长度为1。

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)})
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中亲测有效)
Copyright @ 2021 巴适自动秒收录 此内容系本站根据来路自动抓取的结果,不代表本站赞成被显示网站的内容或立场。 蜀ICP备15001851号
本页阅读量次 | 本站总访问次 | 本站总访客人 | 今日总访问次 | 今日总访客人 | 昨日总访问次 | 昨日总访客人 | 网站地图
巴适自动秒收录于2010年7月建站,现已经稳定运行
技术支持:巴适自动秒收录