掲示板/JavaScript質問板/過去ログ/一覧/ 文字が１０桁になったら自動的にfocus移動

0 名前： なっち ： 2006/03/12 15:39: こんにちは。始めての質問です。

フォームの操作、それもfocus()を使った技についての質問です。
textボックスが2つあって、文字数が10になったら、
自動的に2つ目のボックスにfocusが移動するということをしたいです。

それをjavascriptで試していますがやりかたがわかりません。

if( string == 10)
document.form1.element2.focus();
こんな感じだと思うのですが、やり方を教えてください。

1 名前： 鷽かえ ： 2006/03/12 15:39: 文字列かしてオブジェクトのレンクスをとり論理値がトゥルーに
なったとき、フォーカスを移動させる。おわかり？

2 名前： なっち ： 2006/03/12 15:39: ありがとうございます。

イメージとしてはこんな感じかと思ってます。
しかし、トリガーがわかりません。だから機能しません。
どうやって起動させればいいですか？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<script language="JavaScript">

</script>

<title>練習ページ</title>
</head>
<body>
<p>フォーム練習</p>
<form name="form1" method="POST" action="">
<input type="text" name="a1" size="3" maxlength="10" onChange="move_text();">
<input type="text" name="b1" size="4" maxlength="14">
<input type="submit">
</form>
</body>
</html>

3 名前： m035 ： 2006/03/12 15:39 ［URL］: onkeyup="move_text();"
で出来ました。
onkeydownでも出来ましたが、これだと、3文字入力後に修正が出来ないので
onkeyupのほうが良いようです。

4 名前： 鷽かえ ： 2006/03/12 15:39: イベントはm035さんのでよいと思います。
コードの方ですが、やってみて数字のケタ数を取るのは前のテキストフィールド
からの移動であまりよくないようです。
なので、実際100以上でフォーカスを切り替えるのであれば、99という数字で
設定した方が動作がよいと思います。カウントが長くなるので一応10でフィールド
を移動し同時にフォーカスを移すということでお示しのHTMLをベースに書いてみ
ました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<script language="JavaScript">

</script>

<title>練習ページ</title>
</head>
<body onload="digitCheck()">
<p>フォーム練習</p>
<form name="form1">
<input type="text" name="a1" size="3" maxlength="10">
<input type="text" name="b1" size="4" maxlength="14">
<!input type="submit">
</form>
</body>
</html>

5 名前： Pid ： 2006/03/12 15:39: >>2
HTML と XHTML が混ざってますが，どちらですか？もし XHTML ならば

・script 要素内をコメントアウトしてはいけません（もし不都合が生じるなら外部ファイルにして下さい）。
・script 要素には language 属性ではなく type 属性。
・form 要素には name 属性ではなく id 属性（XHTML 1.0 なら両方併記しても良い）。
・イベント属性を埋め込む場合は Content-Script-Type の指定が必要。

>>3
私も onkeyup が良いと思いますが，「キー押しっ放し」の場合をどうするかの処理が必要ですね。

>>4
digitCheck が呼び出されるたびに obj1，obj2 を取得するよりも，一回だけ取得してグローバル変数に保持しておくのが良いかもしれません（どのみち obj1，obj2 はグローバル変数になっていますので）。setTimeout で常に監視する必要があるでしょうか…？

6 名前： 鷽かえ ： 2006/03/12 15:39: ４のコード例示はあくまでも、イベントを抜きにしたフィールド移動と
フォーカス移動の見本です。
あと、XHTMLうんぬんのことですが、元質問者はたぶん部分的にコピペした
かなにかで「/>」になっているのだとおもいますよ。XHTMLというよりは
HTMLにXHTMLが混じっているというのが素直なとりかたかと。

7 名前： Pid ： 2006/03/12 15:39: >>6
> HTMLにXHTMLが混じっているというのが素直なとりかたかと

いや，ありえませんから (^^;)。

【追記】あ，私，鷽かえさんのコードを読み取れてませんでした（setTimeout をお使いになった意味を勘違いしてました）。すみません。setTimeout 云々は撤回します。

8 名前： Pid ： 2006/03/12 15:39: >>5
> 「キー押しっ放し」の場合をどうするか

すみません，maxlength を指定すれば済む話でしたね（実際，>>2，>>4 では指定されていますし）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>練習ページ</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">

// 全角空白注意
onload = function () {
　　var nTextInputs = [ ];
　　
　　for (var e = document.forms[0].elements, I = e.length, i = 0; i < I; i++) {
　　　　if ('text' == e[i].type) {
　　　　　　e[i].onkeyup = function (index) {
　　　　　　　　return function () { // maxlength に達したら次にフォーカス移動
　　　　　　　　　　if (this.maxLength == this.value.length)
　　　　　　　　　　　　nTextInputs[ (index + 1) % nTextInputs.length ].select ();
　　　　　　　　}
　　　　　　} (nTextInputs.length);

　　　　　　nTextInputs.push (e[i]);
　　　　}
　　}
}

</script>

<h1>フォーム練習</h1>
<form action="#">
<p>
<input type="text" maxlength="3">
<input type="text" maxlength="4">
<input type="text" maxlength="5">
<input type="text" maxlength="6">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>

ただ，これだと

・最大文字数の場合にカーソルキー移動ができない
・IME が有効かどうかで挙動が変わる

という不具合があります。