掲示板/JavaScript質問板/過去ログ/一覧/ タブキーを使わなくても指定桁数で次へフォーカスを移す

0 名前： フォーマー ： 2006/07/21（金） 23:14 ID:E9I.6.2x

inputに数字を入力させるときに、タブキーを使わなくても指定桁数で次へフォーカスを移すスクリプトを改良したいと考えています。
<input>がたくさん（何十個も）あるので、このスクリプトがほしいのです。
ただ、name属性を1個ずつ設定するのは面倒です。
何とかならないものでしょうか。tabindexを活用したいです。

head内に

<SCRIPT type="text/javascript">
<!--
function nextFrame(i, n, m) {
  if (i.value.length >= m) {
    i.form.elements[n].focus();
  }
}
// -->
</SCRIPT>

body内のinputタグで関数を呼び出し、this(オブジェクト自身)、移動先の名前、最大入力文字数を引数として渡します。

<form>
<input type="text" name="n1" size="3"
  maxlength="3" onKeyUp="nextFrame(this, 'n2', 3)">
 - 
<INPUT type="text" name="n2" size="2"
  maxlength="2" onKeyUp="nextFrame(this, 'n3', 2)">
 -
<INPUT type="text" name="n3" size="4"
  maxlength="4">
</form>

1 名前： フォーマー ： 2006/07/21（金） 23:14 ID:E9I.6.2x

別な案を探しました。

function f_checkTabMove(textObj){
    if(textObj.value.length == textObj.getAttribute('maxlength')){
        var o = textObj;
        do { o = o.nextSibling;
           } while (o && ! o.tagName || o.tagName.toLowerCase() != "input");
        if (o != null) { o.focus(); }
    }
}

タブインデックスを使いたい。

<input type="text" maxlength="5" size="8" name="ran2" tabindex="2"　onKeyUp="f_checkTabMove(this)">

しかし、これだとタブインデックス順には進まないんです。
困った。

2 名前： Pid ： 2006/07/21（金） 23:14 ID:/cYYuQrv: 現在の tabindex 属性値を取得して次を探すだけですから，>>1 のスクリプトが組めるならそれほど難しくはなさそうですが…（ただ，効率化するには一工夫必要かも知れません）。

> if(textObj.value.length == textObj.getAttribute('maxlength'))

textObj.value を使うなら，maxlength 属性だけ getAttribute するのは一貫性に欠けるような（cf. DOM HTML）。

・textObj.maxLength
・textObj.tabIndex

> o.tagName.toLowerCase() != "input"

XHTML 対応スクリプトが必要ならこれでも構いません。しかし，X のつかない HTML ならば，o.tagName は必ず大文字を返します（これに関して不具合を持つ実装を，今のところ知りません）ので，小文字変換は不要です。

3 名前： フォーマー ： 2006/07/21（金） 23:14 ID:E9I.6.2x: > tabindex 属性値を取得して次を探すだけです
これはどうすればいいのでしょうか？
>>2　は自作ではないので不勉強でわからないことだらけです。よければ
おしえてください。

4 名前： Pid ： 2006/07/21（金） 23:14 ID:GOE45W6U

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TAB index</title>

<script type="text/javascript">

onload = function () {
    var result = [ ];
    var nodes = document.getElementsByTagName ('input');
    
    for (var i = 0, I = nodes.length; i < I; i++)
        if (nodes[i].tabIndex) {
            result[nodes[i].tabIndex] = nodes[i];
            
            nodes[i].onkeyup = function () {
                if (this.value.length == this.maxLength)
                    if (result[this.tabIndex + 1])
                        result[this.tabIndex + 1].focus ();
                    else
                        result[1].focus ();
            };
        }
}

</script>

<p>
<input type="text" value="" tabindex="1" maxlength="2">
<input type="text" value="" tabindex="5" maxlength="2">
<input type="text" value="" tabindex="2" maxlength="2">
<input type="text" value="" tabindex="4" maxlength="2">
<input type="text" value="" tabindex="3" maxlength="2">
</p>

なお，上記は

・tabindex 属性値が 1 から始まり，1 ずつ進むことを前提にしている。
・disabled 属性を見ていない。
・イベントハンドラを上書きしている。

という点で，潜在的なバグを抱えています（tabindex 属性値は 0-32767 までの整数で，特定の値で始まる必要はなく，数値が連続する必要もなく，同じ値の場合は出現順に移動しなければならない）。