次に、Jquery を使用して Enter キーを実装し、フォーカスを切り替えます。このコードは、一般的なブラウザー IE7、IE8、Firefox 3、Chrome 2、および Safari 4 でテストされています。 使用した開発ツールは Microsoft VS2010 Jquery フレームワークです。 実装手順は次のとおりです1. まず Jquery クラス ライブラリを参照します 2. Javascript コード コードをコピーコードは次のとおりです: <br>$(function () { <br>$('input:text:first')。 focus(); <br> var $inp = $('input:text'); <br>$inp.bind('keydown', function (e) { <br>var key = e.that; <br> if (key == 13) { <br>e.preventDefault(); <br>var nxtIdx = $inp.index(this) 1; <br>$(":input:text:eq(" nxtIdx ")" ).focus(); <br>} <br>}); <br><br> <br>分析: </div>$('input:text :first').focus( ; .bind('keydown', function (e) {} <br>'keydown' イベントをテキスト ボックス コレクションにバインドします <br>var key = e.that; <br>取得Enter Key value = 13 <br>e.preventDefault(); <br> など、現在押されているキーの値により、デフォルトの動作が発生するのを防ぐことができますが、別の同様のことが起こります。メソッドは stopPropagation です。これは、JS イベントのバブリングを防ぐ役割を果たします。<br>イベント プロキシは、JavaSciprt イベントで無視されることが多い 2 つの機能、およびマウスなどの要素上のイベントがトリガーされたときのターゲット要素を使用します。ボタンをクリックすると、その要素のすべての祖先要素で同じイベントがトリガーされ、イベントが元の要素から DOM ツリーの最上位にバブルアップされます。どのイベントでも、ターゲット要素は元の要素であり、この場合はボタンです。ターゲット要素 これは、イベント オブジェクトの属性として表示されます。イベント プロキシを使用すると、要素にイベント ハンドラーを追加し、イベントが子要素からバブルアップするのを待って、イベントがどの要素から開始されたかを簡単に判断できます。 <br>var nxtIdx = $inp.index(this) 1; <br>取得した要素セットの次の要素インデックス inp<br>$(":input:text:eq(" nxtIdx ")").focus ( ); <br> コレクションの次の要素にフォーカスを移動します <br><br> 3. HTML コード <br> <br><br><br><br><strong> コードをコピーします </strong><br> <div class="codetitle"> コードは次のとおりです。<span><a style="CURSOR: pointer" data="76798" class="copybut" id="copybut76798" onclick="doCopy('code76798')"> <u><div> </u><asp:TextBox ID="txt1" runat="server" /><br /> 🎜> <asp:TextBox ID="txt2" runat="server" /><br /> </a><asp:TextBox ID="txt3" runat="server" /><br /> ; </span><asp:TextBox ID="txt4" runat="server" /></div></div> <div class="codebody" id="code76798"> <br> <br>ページ上に 4 つのテキスト ボックス <br> 3. プログラムを実行します <br><br><br> ページ上に TextArea 要素がある場合、Enter を使用してフォーカスを切り替えるには次の方法があります。 JQuery のいくつかの機能。 <br> </div> <br>4. HTML コード<br> <br><img src="http://files.jb51.net/upload/201009/20100914012723429.gif" border="0" alt="Jquery_jqueryに基づいてフォーカスを切り替えるEnterキーの実装" ><br><br><br> コードをコピーします <strong></strong><br> コードは次のとおりです。 ><div class="codetitle"> <span><div> <a style="max-width:90%" data="54771" class="copybut" id="copybut54771" onclick="doCopy('code54771')"><asp:TextBox ID="tb1" runat="server" class="cls" /><U><asp: TextBox ID= "tb2" runat="server" class="cls" /><br /> <asp:TextBox ID="tb3" TextMode="MultiLine" runat="server" class= "cls" />gt;<br /></a><asp:TextBox ID="tb4" runat="server" class="cls" /><br /></span> div> </a></span> </div> <div class="codebody" id="code54771"> <br>分析: <br>ページ内のすべての TextBox は、後のページ要素の Jquery クエリを容易にするために Class="cls" を参照します。 <br><br><br>5. Javascript コード<br> <br> </div> <br><br><br> コードをコピーします <br><strong></strong> コードは次のとおりです: <br><div class="codetitle"> <span><script type="text/javascript"> <a style="CURSOR: pointer" data="94292" class="copybut" id="copybut94292" onclick="doCopy('code94292')">$(function () { <u>$('input:text:first').focus(); </u>var $inp = $('.cls'); </a>$inp.bind('keydown', function (e) { </span>var key = e.that; </div>if (key == 13) { <div class="codebody" id="code94292">e .preventDefault(); <br>var nxtIdx = $inp.index(this) 1; <br>$(".cls:eq(" nxtIdx ")").focus(); 🎜>} ); <br>分析: var $inp = $('.cls'); 採用されるスタイルは、cls のすべての要素を変数 inp に代入することです 6. 操作の効果 著者: スマートライフ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
