1. 程式人生 > >jq 鍵盤事件,點選鍵盤上的上鍵,input上一個獲取焦點,點選下鍵,input下一個獲取焦點

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>