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ベストアンサー
- 回答日時:
一般的に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
- 回答日時:
テキストボックスの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>
といった具合です
# 字下げには全角スペースを使用してます
お礼が遅くなりすみません。親切なサンプルありがとうございます!!
なるほど、こういうやり方があるのですね!
初心者のため見当もつきませんでした↓↓
勉強になります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
JavaScriptにて動的に配列を作...
-
ラジオボタンでクリックした値...
-
cookie使用時にundefinedと表示...
-
Javascriptでのbuttonのname属...
-
ファイル選択ダイアログが表示...
-
jQueryで属性連番処理を、複数...
-
テキストエリアをenterキーでフ...
-
入力フォームに半角スペース以...
-
focusについて
-
tabindex値の設定
-
hiddenを動的に作成したい
-
新しくフォルダを作成したい
-
name属性のないformタグの、中...
-
ふりがな自動入力で姓名を分け...
-
チェックボックスのON/OFFでVal...
-
正規表現で複数マッチ条件で悩...
-
onchangeイベントを強制的に発...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
新しくフォルダを作成したい
-
Javascriptでのbuttonのname属...
-
ファイル選択ダイアログが表示...
-
出発駅A、到着駅Bを選択すると...
-
テキストボックスの入力をリセット
-
JavaScriptにて動的に配列を作...
-
submitボタン押下時にPOSTされ...
-
ボタンを押すとテキストボック...
-
ラジオボタンでクリックした値...
-
二つの入力欄に、同時に同じ文...
-
テキストボックスの値同士を比...
-
name属性のないformタグの、中...
-
ASP.NETでNAME属性を固定にしたい
-
複数のテキストフィールドを同...
-
フォームの一部をPOSTで送信で...
-
テキストエリアをenterキーでフ...
-
動的にTabindexの値を変えたい!
-
GETパラメータの内、空文字のク...
おすすめ情報