Jquery はフォーカスを切り替えるための Enter キーを実装します

デフォルトでは、システムは Tab キーを使用してページ要素のフォーカスを切り替えます。Enter キーでもこの機能を実現でき、優れたユーザー エクスペリエンスが得られると考えたことはありますか。次に、 Jquery を使用して Enter キーを実装し、フォーカスを切り替えます。このコードは、一般的に使用されるブラウザー IE7、IE8、Firefox 3、Chrome 2、および Safari 4 でテストされています。

使用した開発ツールはMicrosoft VS2010+Jqueryフレームワークです。

実装手順は次のとおりです

1. まず、Jquery クラス ライブラリを参照します。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

2.JavaScriptコード

<script type="text/javascript">
$(関数() {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function (e) {
var key = e.that;
if (キー == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>

分析します:

$('input:text:first').focus();

ページが初期化されると、フォーカスは最初のテキスト ボックスに配置されます。

var $inp = $('input:text');

type=text box 要素コレクションを取得します。

$inp.bind('keydown', function (e) {}

「keydown」イベントをテキストボックスコレクションにバインドします。

var key = e.that;

現在押されているキーの値を取得します (Enter キーの値 = 13 など)。

e.preventDefault();

デフォルトの動作が発生しないようにすることもできますが、ここでは PostBack が発生するのを防ぎ、代わりにフォーカスを切り替えます。もう 1 つの同様のメソッドとして stopPropagation があります。これは、js イベントのバブルアップを防ぎます。