jq 鍵盤事件,點選鍵盤上的上鍵,input上一個獲取焦點,點選下鍵,input下一個獲取焦點
阿新 • • 發佈:2018-12-18
<!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>