この記事の例では、JS を使用して入力ボックスのフォーカスを矢印キーで切り替える方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここでは、入力ボックスのフォーカス効果を切り替えるための js 方向キー コントロールを示しますが、Firefox とは互換性がありません。入力が完了したら、マウスをクリックせずに Enter キーまたは矢印キーを押して入力したいテキストボックスにフォーカスを移動することで、頻繁にデータを入力する場合の入力速度を向上させることができます。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/
具体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS方向键切换输入框焦点</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table border="1" id="mm" onkeydown="keyDown(event)"> <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> </table> <script language="javascript" type="text/javascript"> <!-- var inputs=document.getElementById("mm").getElementsByTagName("INPUT"); function keyDown(event) { var focus=document.activeElement; if(!document.getElementById("mm").contains(focus)) return; var event=window.event||event; var key=event.keyCode; for(var i=0; i<inputs.length; i++) { if(inputs[i]===focus) break; } switch(key) { case 37: if(i>0) inputs[i-1].focus(); break; case 38: if(i-4>=0) inputs[i-4].focus(); break; case 39: if(i<inputs.length-1) inputs[i+1].focus(); break; case 40: if(i+4 <inputs.length) inputs[i+4].focus(); break; } } //--> </script> </body> </html>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。