表单的友好操作

最新推荐文章于 2023-08-15 13:06:59 发布

那就叫菜鸟吧

最新推荐文章于 2023-08-15 13:06:59 发布

阅读量231

点赞数

分类专栏：前端学习之旅文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_47974640/article/details/122550814

版权

前端学习之旅专栏收录该内容

18 篇文章 0 订阅

订阅专栏

（一）
在我们日常的信息输入和收集中，使用最多的就是表单，当我们面对一些诸如身份证、手机号码等输入的字符数量是固定的时候，有个小技巧可以提升用户输入的便捷度，让用户节省输入的时间
需要的技术很小，就是：当用户输入的字符数量达到最大时，将文本框的焦点自动聚焦到下一个文本框。

准备一个表单

 <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);

        }