jq 键盘事件，点击键盘上的上键，input上一个获取焦点，点击下键，input下一个获取焦点

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>

    <body> 
        <ul>
            <li><input type="text" /></li>
            <li>
                <ol>
                    <li><input type="text" /></li>
                    <li><input type="text" /></li>
                    <li><input type="text" /></li>
                    <li><input type="text" /></li>
                    <li><input type="text" /></li>
                </ol>
            </li>
        </ul>
        <dl> 
            <dd><input type="text" /></dd>
            <dd><input type="text" /></dd>
            <dd><input type="text" /></dd>
            <dd><input type="text" /></dd>
            <dd><input type="text" /></dd>
        </dl>
        <script>
            $(function() {
                var flag = false,index=0;
                function focusZ($lis) {
                    $lis.keydown(function(event) {
                        if(!flag){
                            return false;
                        };
                        switch(event.keyCode) {
                            case 38:
                                if(index!=0){
                                    focusL($lis,index-1);
                                };
                                console.log(index);
                                console.log('上')
                            break;
                            case 40:
                                if(index!=($lis.length-1)){
                                    focusL($lis,index+1);
                                };
                                console.log(index);
                                console.log('下');
                            break;
                        };
                    });
                };
                
                function focusL($lis,num) {
                    $lis.eq(num).find("input").focus();
                };
                
                $("ol li").on("focus","input",function(){
                    flag=true;
                    index = $(this).parent('li').index();    
                    console.log(index)
                });
                focusZ($("ol li"));
                
                $("dl dd").on("focus","input",function(){
                    flag=true;
                    index = $(this).parent('dd').index();    
                    console.log(index)
                });
                focusZ($("dl dd"));
            })
        </script>
    </body>

</html>
jq 键盘事件，点击键盘上的上键，input上一个获取焦点，点击下键，input下一个获取焦点

猜你喜欢
