外出自粛中でも楽しく過ごす!QAまとめ>>

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>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

一般的に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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/11/27 11:41

テキストボックスの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>
といった具合です
# 字下げには全角スペースを使用してます
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/11/27 11:37

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング