リターンボタンを押してフォーカスを切り替える

2380 ワード

JavaScript keycode リターンキーのフォーカス切り替え

ネット上で情報を登録する時、いつも一つの情報を入力してから車を返すボタンを押すと、焦点は自動的に次の入力ボックスに切り替わります.今日はちょうどこの例を練習しました.

<html>
	<head>
		<title>change focus</title>
	</head>
	<body>
		<form>
			<table>
				<tr>
					<td>Username:</td><td><input id="username" /></td>
				</tr>
				<tr>
					<td>Password:</td><td><input id="password" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>
<script>
var usernameObj = document.getElementById("username");
usernameObj.onkeydown = function(event) {
	e = event ? event :(window.event ? window.event : null);
	//              
	if(e.keyCode==13 && usernameObj.value){   
		document.getElementById("password").focus();
	}
}
</script>

    上記のコードでは、まずusernameのDOMノードオブジェクトを取得し、その後、usernameのDOMノードオブジェクトにkeydownイベントを縛り、イベントにリターンキーイベントを捕獲させ、捕獲されたら、次の入力ボックスにフォーカスを切り替える.
    上記のkeydownイベントの指す方法の中に、イベントオブジェクトイベントが入ってきます.
e=イベントイベント:(window.event?window.event:null)この行はブラウザ対応の問題を解決しました.
    IEブラウザは、イベント方法に現在のイベントが入ってきます.つまり、IEブラウザの下に、このイベントが入ってきます.IEブラウザではなく、イベントの着信がないと、eは(window.event?window.event:null)であるwindow.eventに等しいです.これはIEブラウザ以外のイベントオブジェクトを取得しました.
    そして、イベントのkeyCodeが13に等しいかどうかを判断し、keyCodeが13に等しいということは、イベントがコールバックキーであることを示し、リターンキーを押すと、入力ボックスに入力値があり、次の入力ボックスにフォーカスを合わせる.
    上のコードの中で、私達はイベントのバインディングをスクリプト部分に置いてもいいです.イベントをHTML要素に結び付けてもいいです.スクリプトの中でイベントの処理方法を宣言すればいいです.

<html>
	<head>
		<title>change focus</title>
	</head>
	<body>
		<form>
			<table>
				<tr>
					<td>Username:</td><td><input id="username" onkeydown="changeFocus(event)" /></td>
				</tr>
				<tr>
					<td>Password:</td><td><input id="password" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>
<script>
function changeFocus(event) {
	e = event ? event :(window.event ? window.event : null);
	//              
	if(e.keyCode==13 && document.getElementById("username").value){   
		document.getElementById("password").focus();
	}
}
</script>

この書き方は上の方法と同じ効果です.

javascript学習ノート(二)