使用Javascript可以从多个方面增强表单字段的易用性。其中,最常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一个字段,必须知道用户已经输入了既定长度的数据(例如电话号码),输入一个后焦点切换到下一个输入框
<!-- 自动切换焦点 --> <div id="telWrap"> <input type="text" name="tel1" id="txtTel1" maxlength="3"> <input type="text" name="tel2" id="txtTel2" maxlength="3"> <input type="text" name="tel3" id="txtTel3" maxlength="4"> </div>
var textbox1 = document.getElementById("txtTel1") var textbox2 = document.getElementById("txtTel2") var textbox3 = document.getElementById("txtTel3") document.addEventListener("keyup",tabForward) // 使用事件代理,也可用下面的 // textbox1.addEventListener("keyup",tabForward) // textbox2.addEventListener("keyup",tabForward) // textbox3.addEventListener("keyup",tabForward) function tabForward(event){ var target = event.target if(target.value.length == target.maxLength){ // 注意不是maxlength var elements = document.getElementById("telWrap").getElementsByTagName("input") for(let i=0;i<elements.length;i++) { if(elements[i] == target){ if(elements[i+1]){ elements[i+1].focus() } return // 退出当前函数 } } } }
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句