• ベストアンサー
  • 困ってます

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

  • 質問No.7533730
  • 閲覧数3828
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 66% (2/3)

こんにちは。

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

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

スクリプトの再利用ができるよう、たとえば同じ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>

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 51% (3827/7415)

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

<script>
function test(elm) {
var n=elm.form.elements[elm.name];
if (elm.value.length >= elm.maxLength) {
for(var i=0;i<n.length;i++){
if(n[i]==elm){
if(n[i+1]) n[i+1].focus();
}
}
}
}
</script>

<form>
<div>
<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
<input type="text" name="fuga" maxlength="4" 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)"/>
<input type="text" name="fuga" maxlength="3" onkeyup="test(this)"/>
</div>
</form>
お礼コメント
puyo28

お礼率 66% (2/3)

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

if(n[i]==elm){

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

おかげで助かりました。


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

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

ありがとうございました。
投稿日時:2012/06/18 12:58

その他の回答 (全2件)

  • 回答No.3

ベストアンサー率 51% (1060/2054)

こんにちは。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />&nbsp;-
<input type="text" name="hoge" maxlength="4" class="automove" />&nbsp;-
<input type="text" name="hoge" maxlength="5" class="automove" />&nbsp;-
<input type="text" name="hoge" maxlength="2" class="automove" />
</form>
<form id="form-test2">
<input type="text" name="hoge" maxlength="2" class="automove" />&nbsp;-
<input type="text" name="hoge" maxlength="3" class="automove" />&nbsp;-
<input type="text" name="hoge" maxlength="4" class="automove" />&nbsp;-
<input type="text" name="hoge" maxlength="5" class="automove" />
</form>
</body>
</html>
<!-- q7533730 -->
お礼コメント
puyo28

お礼率 66% (2/3)

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

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

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

参考にさせていただきたいと思います。
ありがとうございます。感謝いたします。
投稿日時:2012/06/16 00:40
  • 回答No.1

ベストアンサー率 51% (1060/2054)

こんにちは。

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

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

class="automove"を与えたinputに対してmaxlengthを取得して文字数と判定して次のオブジェクトに対してフォーカスを当てています。
tabキーで遷移時の処理は省いていますのでそのへんはうまく実装してみてください。
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ