テキストボックスのフォーカス移動

解決済

質問者：puyo28
質問日時：2012/06/14 22:41
回答数：3件

こんにちは。

htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを
移動させたいと考えています。

下の例の場合、１番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカス
を２番目のテキストボックスに移動させ、２番目のテキストボックスに4ケタ入力したら
３番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。

スクリプトの再利用ができるよう、たとえば同じname属性を与えればその範囲内で
簡単にフォーカスを移動させられるようなものにしたいと思うのですが、うまくいきません。

何か良い書き方はありませんでしょうか？

<div>
　<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
　<input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/>
　<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
　<input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/>
</div>
　・
　・
<script type="text/javascript">

function test(elm) {
　if (elm.value.length >= elm.maxLength) {

　　/*（気持ちとしては、ここにこのような感じのことを書きたいのですが・・・）
　　　　var arr_elm = document.getElementsByName(elm.name);
　　　　var n = elm.index + 1
　　　　arr_elm[n].focus();
　　*/　
　}
}
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2012/06/15 09:53

最後までいったらどうするのでしょう？

- 0
- 件

通報する

この回答へのお礼

お礼遅くなりましてすみません。
ありがとうございました。

if(n[i]==elm){

という評価が動作するんですね。

おかげで助かりました。

最後までいったら別な関数を呼び出して入力チェックし、
別な処理コードへ入力結果を投げるつもりです。

その後、focus（またはselect）で最初に戻るかどうかは、
全体の使いやすさを見ながら決めようと思っています。

ありがとうございました。

通報する

お礼日時：2012/06/18 12:58

No.3

回答者： LancerVII
回答日時：2012/06/15 09:55

こんにちは。

すみません、一応ソースを載せておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【OKWave回答サンプル集】テキストボックスのフォーカス移動</title>
<link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1');</script>
<script type="text/javascript">
$().ready ( function() {
$('input.automove').each ( function(index) {
$(this).keyup ( function(event) {
if ( $(this).val().length >= $(this).attr('maxlength') ) {
$(this).next().focus().select();
}
}).width($(this).attr('maxlength')*8);
});
});
</script>
<style type="text/css">
.automove {
border: solid 1px #666;
}
</style>
</head>
<body>
<h1>テキストボックスのフォーカス移動(q7533730)</h1>
<form id="form-test1">
<input type="text" name="hoge" maxlength="5" class="automove" />-
<input type="text" name="hoge" maxlength="4" class="automove" />-
<input type="text" name="hoge" maxlength="5" class="automove" />-
<input type="text" name="hoge" maxlength="2" class="automove" />
</form>
<form id="form-test2">
<input type="text" name="hoge" maxlength="2" class="automove" />-
<input type="text" name="hoge" maxlength="3" class="automove" />-
<input type="text" name="hoge" maxlength="4" class="automove" />-
<input type="text" name="hoge" maxlength="5" class="automove" />
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

jQueryについては全くの勉強不足・・といいますか、
正直言いまして未知の世界です。

いただいたソースファイルは、まさに期待通りの
動きをしてくれました。

参考にさせていただきたいと思います。
ありがとうございます。感謝いたします。

通報する

お礼日時：2012/06/16 00:40

No.1

回答者： LancerVII
回答日時：2012/06/15 09:53

こんにちは。

jQueryを利用して作ってみました。
(jQueryを利用できない、利用したくないという状況であればすみません)

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7533730/

class="automove"を与えたinputに対してmaxlengthを取得して文字数と判定して次のオブジェクトに対してフォーカスを当てています。
tabキーで遷移時の処理は省いていますのでそのへんはうまく実装してみてください。