[資源]回車和小鍵盤切換input焦點(示例代碼)
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
 ：[資源]回車和小鍵盤切換input焦點(示例代碼) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單事件 and 鍵盤事件and 回車和小鍵盤切換input焦點</title> <style type="text/css"> .color { background-color: rgb(77,198,227); border-color: white; } input { line-height: 25px; border-color: red; } </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> <script type="text/javascript" src="../jquery-1.8.3.js"></script> <script type="text/javascript"> //回車和小鍵盤切換input焦點 function getfocus(thisinput) { var inputs = document.getElementsByTagName("input"); if(event.keyCode == 13 || event.keyCode == 40 || event.keyCode == 39) { for (var i=0; i < inputs.length; i++) { if (thisinput == inputs[i]) { if (i == (inputs.length - 1 )) { inputs[0].focus(); break; } else { inputs[i + 1].focus(); break; } } } } else if(event.keyCode == 38 || event.keyCode == 37) { for (var i=0; i < inputs.length; i++) { if (thisinput == inputs[i]) { if(i != 0) { inputs[i - 1].focus(); break; } else { inputs[inputs.length - 1].focus(); break; } } } } } $(function() { $("input").change(function() { $(this).css("border","double"); }); $("input").bind({focus:function() { $(this).addClass("color"); }, blur:function() { $(this).removeClass("color"); }}); $("input").keydown(function(event) { var thisinput = $(this)[0]; getfocus(thisinput); }); }); </script> </head> <body> <input type="text" name="txt"> <input type="text" name="txtName"> <input type="text" name="Name"><br/><br/> <input type="text" name="txt"><br/><br/> <input type="text" name="txtName"><br/><br/> <input type="text" name="Name"><br/><br/> <table border="1" width="70%" id="ice"> <tr> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> </tr> <tr> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> </tr> <tr> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> </tr> <tr> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> </tr> <tr> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> </tr> </table> </body> </html> 該文章在 2023/6/8 11:54:37 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
