(一)
在我们日常的信息输入和收集中,使用最多的就是表单,当我们面对一些诸如身份证、手机号码等输入的字符数量是固定的时候,有个小技巧可以提升用户输入的便捷度,让用户节省输入的时间
需要的技术很小,就是:当用户输入的字符数量达到最大时,将文本框的焦点自动聚焦到下一个文本框。
准备一个表单
<form action="" id="form">
最大字符长度:07:<input type="text" maxlength="7"><br>
最大字符长度:08:<input type="text" maxlength="8"><br>
最大字符长度:09:<input type="text" maxlength="9"><br>
最大字符长度:10:<input type="text" maxlength="10"><br>
最大字符长度:12:<input type="text" maxlength="12"><br>
</form>
<script>
function toNextInput(e) {
const target = e.target;
// 点击的目标的value值的长度==设定的最大字符数量
if (target.value.length == target.maxLength) {
let myform = target.form;
for (let i = 0, len = myform.elements.length; i < len; i++) {
// 遍历所有input,当当前input==点击的input就让焦点移动到下一个
if (target == myform.elements[i]) {
if (myform.elements[i + 1]) {
myform.elements[i + 1].focus()
}
}
}
}
}
let form = document.querySelector('#form')
for (let i = 0; i < form.elements.length; i++) {
// 对每个input元素进行监听,满足toNextInput函数条件就执行
form.elements[i].addEventListener('keyup', toNextInput);
}
(未完待续~)