ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript では、Enter キーを押して focus_javascript スキルを切り替えるように実装されています。

JavaScript では、Enter キーを押して focus_javascript スキルを切り替えるように実装されています。

WBOY
リリース: 2016-05-16 16:15:12
オリジナル
1553 人が閲覧しました

私は少し前に HTML と CSS を学び、この側面に興味を持ち始めました。最近は JavaScript Advanced Programming (第 3 版) も学び始め、イベントとフォーム スクリプトについて学びました。数日前、先生が私にコードを書くように言いました。JavaScript フォームで、Enter キーと上下左右のキーを使用して、あるテキスト ボックスから前後のテキストにフォーカスを移動します。箱。これまでに学んだ知識を応用して、コードを作成しようとしましたが、コードを作成する際にいくつかの困難に遭遇しました。関数内で this と引数を使用して、イベント ハンドラーを追加するために addHandler() メソッドを使用しました。イベント。先生の協力もあり、上記の問題を解決できたので、このコードを通してかなりの知識が得られたと思いますので、完成後にコメントを書いて公開したいと思います。

コードをコピー コードは次のとおりです:



   
   


   

       

       

       

       

       

       


<スクリプト>
関数 is_down(e) {
var isDown;
e = e || window.event;
スイッチ (e.keyCode) {
case 13: //Enter キー
case 39: //右移動キー
case 40: //下に移動キー
isdown = true;
休憩;
case 37: //左キーを移動
case 38: //上に移動キー
isdown = false;
休憩;
}
return isDown;
}
関数 key_up(){
//関数を呼び出すと、関数自体が this と引数を生成します
//これと引数を使用して、それぞれフィールドとトリガーされたイベントを検索します
var e=arguments[1];
return is_down(e) === 未定義 ? true : handle_element(this, is_down(e));
}
function handle_element(field, is_down) {
var 要素 = field.form.elements;
for (var i = 0, len = elements.length-1; i If (フィールド == 要素[i]) {
休憩;
}
}
i = is_down ? (i 1) % len : (i - 1) % len;
//(0===i && is_down) --> 最後のテキスト ボックスにフォーカスが当たったら、下キーを押します
//(-1===i && !is_down) --> 最初のテキスト ボックスにフォーカスが当たったら、上キーを押します
If((0===i && is_down)||(-1===i && !is_down)){
return true;
}
elements[i].focus();
var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];
If (element_arr.join(',').indexOf(elements[i].type) > -1)
elements[i].select();
return false;
}
// Enter
でデフォルトの送信フォーム イベントをキャンセルします document.onkeydown = function(e) {
e = e || window.event;
If(e.keyCode == 13) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
};
//クロスブラウザ認識 addEventListener とattachEvent(IE)
function addHandler(要素, タイプ, ハンドラー) {
if (element.addEventListener)
element.addEventListener(type, handler, false);
else if (element.attachEvent)
element.attachEvent("on" type, handler);
その他
element["on" type] = handler;
}
var 要素 = document.forms[0].elements;
for (var i = 0, len = elements.length; i //keyup イベント用の key_up イベント ハンドラを追加
addHandler(elements[i], "keyup", key_up);
}



上記がコードの全体的な内容であり、考慮すべき箇所はすべて網羅されていると個人的には感じています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート