私は少し前に 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);
}