Enterで指定のテキストボックスにフォーカスを・・・

質問

Enterを押すと指定のテキストボックスにフォーカスを移動させたいのですがやり方がわかりません・・・。

例えば以下の様なフォームで
TB1→TB2→TB3→TB5→TB6
という具合に移動させたいです。

どうか皆さんのお知恵をお貸しください。

<form name = "textbox">
<input type = "text" name="TB0" onFocus="this.blur()">
<input type = "text" name="TB1">
<input type = "text" name="TB2">
<input type = "text" name="TB3"><br>
<input type = "text" name="TB4"onFocus="this.blur()">
<input type = "text" name="TB5">
<input type = "text" name="TB6">
</form>

回答No.2

steel_gray · ベストアンサー

一般的にwebブラウザでフォームの項目移動と云えばTABキーが割り当てられているのでそういうJavascriptは余計なお世話になりかねませんが…

固有のシステムの要件だとしたら、IE限定になりますが次のように。
（フォーカスの移動順序は tabindex属性で指定、JavascriptではENTERキーをTABキーに差し替え）

<form name = "textbox">
<input type = "text" name="TB0" onFocus="this.blur()">
<input type = "text" name="TB1" tabindex="1"
onkeydown="if(event.keyCode == 13) event.keyCode = 9">
<input type = "text" name="TB2" tabindex="2"
onkeydown="if(event.keyCode == 13) event.keyCode = 9">
<input type = "text" name="TB3" tabindex="3"
onkeydown="if(event.keyCode == 13) event.keyCode = 9"><br>
<input type = "text" name="TB4"onFocus="this.blur()">
<input type = "text" name="TB5" tabindex="4"
onkeydown="if(event.keyCode == 13) event.keyCode = 9">
<input type = "text" name="TB6" tabindex="5">
</form>

お礼

御礼が遅くなりすみません。サンプルありがとうございます！！
フォームの設定だけでも可能なのですね！
今回はsteel_grayさんのサンプルを使わせていただきました。
助かりました。ありがとうございます！！

回答No.1

redfox63

テキストボックスのkeypressイベントを処理してやればよさそうですよ

<input type="text" name ="TB1" onkeypress="return myKeyPress(this);">
といった具合にテキストボックス定義します
処理したいテキストボックスに対して同様に定義します

<script type="text/javascript">
function myKeyPress( obj )
{
　　// Enterキーかどうか
　　if ( event.keyCode == 0x0d ) {
　　　　var sName, oNext;
　　　　sName = obj.Name;
　　　　// どのテキストボックスか特定
　　　　if ( sName == "TB1" ) {
　　　　　　oNext = docuemnt.getElementById("TB2");
　　　　} else if ( sName == "TB2" ) {
　　　　　　oNext = docuemnt.getElementById("TB3");
　　　　} else if ( sName == "TB3" ) {
　　　　　　oNext = docuemnt.getElementById("TB5");
　　　　} else if ( sName == "TB5" ) {
　　　　　　oNext = docuemnt.getElementById("TB6");
　　　　} else if ( sName == "TB6" ) {
　　　　　　oNext = docuemnt.getElementById("TB1");
　　　　}
　　　　// 次のテキストボックスが見つかっているなら
　　　　if ( oNext != null ) {
　　　　　　oNext.focus();
　　　　　　event.Returnvalue = False;
　　　　　　return False;
　　　　}
　　}
　　return True;
}
</script>
といった具合です
# 字下げには全角スペースを使用してます

お礼

お礼が遅くなりすみません。親切なサンプルありがとうございます！！
なるほど、こういうやり方があるのですね！
初心者のため見当もつきませんでした↓↓
勉強になります。