实现密码输入框输入一个自动下一个,删除自动上一个位置

作者:Liaodeity - 2020年05月22日


each语法

index - 选择器的 index 位置。

element - 当前的元素(也可使用 "this" 选择器)。

$(selector).each(function(index,element))

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://www.jianbaizhan.com/home/js/jquery.js"></script>
</head>
<body>
<div id="pwd">
    <input type="password" value="5">
    <input type="password" value="2">
    <input type="password" value="0">
    <input type="password" value="5">
    <input type="password" value="2">
    <input type="password" value="0">
</div>
<input type="button" value="获取">
<script>
    $(function () {
        $("input[type='button']").click(function () {
            var pass = ''
            $("input[type='password']").each(function () {
                pass += $(this).val()
            })
            alert(pass)
        })
        //输入自动切换下一个input
        //方法一
        $("body").on('keyup', "#pwd input[type='password']", function (event) {
            switch (event.keyCode) {
                case 8:
                    //删除键,删除后自动切换到上一个input
                    var pass_input = $(this).prev();
                    if (pass_input.length) {
                        pass_input.focus();
                        pass_input.select();
                    }
                    break;
                default:
                    //默认下一个input
                    var pass_input = $(this).next();
                    if (pass_input.length) {
                        pass_input.focus();
                        pass_input.select();
                    }
                    break;
            }
        });
        //方法二
        // var pass_input = $("input[type='password']");
        // for (var i = 0; i < pass_input.length; i++) {
        //     var input = pass_input[i];
        //     input.index = i;
        //     input.onkeyup = function (event) {
        //         switch (event.keyCode) {
        //             case 8:
        //                 //删除键,删除后自动切换到上一个input
        //                 var prev = this.index - 1;
        //                 if (prev < 0) return;
        //                 pass_input[prev].focus();
        //                 pass_input[prev].select();
        //                 break;
        //             default:
        //                 //默认下一个input
        //                 this.value = this.value.replace(/^(.).*$/, '$1');
        //                 var next = this.index + 1;
        //                 if (next > pass_input.length - 1) return;
        //                 pass_input[next].focus();
        //                 break;
        //         }
        //     }
        // }

    })
</script>
</body>
</html>


本文作者: Liaodeity

本文链接: https://www.jianbaizhan.com/article/648

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!