1

タブを押すとテキストボックスに1つずつフォーカスを設定しようとしていますが、うまくいきません。

ここに私が試したコードがあります:

function showstep2() {
    document.getElementById('step2').style.visibility = 'visible'
    document.getElementById('prevOrdQuan').focus();
}

function showstep3() {
    document.getElementById('step3').style.visibility = 'visible';
    document.getElementById('takeOutAmt').focus();
}    

function showstep4() {
    document.getElementById('step4').style.visibility = 'visible';
    document.getElementById('compsPerWeek').focus();
}

HTML:

<table style="width: 100%;" align="left">
    <tbody>
        <tr>
            <td>How many TakeOut Orders do You do each week?</td>
            <td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();"  /></td>
        </tr>
    </tbody>
</table>

<table id="step2"  style="width: 100%;  visibility: hidden;"  align="left">
    <tbody>
        <tr>
            <td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
            <td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
        </tr>
    </tbody>
</table>

<table id="step3" style="width: 100%; visibility: hidden;" align="left">
    <tbody>
        <tr>
            <td>How Much Is Your Average Takeout Order?</td>
            <td><input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
        </tr>
    </tbody>
</table>

3 つのテキスト ボックスがあり、最初のテキスト ボックスについては、次のようにロードにフォーカスを設定しました。

 function setFocus() {
    document.getElementById("prevOrdQuan").focus();
}

最初のテキストボックスにフォーカスを設定します。最初のテキストボックスでタブを押した後、2番目のテキストボックスが表示されますが、2番目のテキストボックスにはフォーカスが設定されていません。

これは私が解決する必要がある問題です。

4

1 に答える 1

1

関数に問題があります。最初のテキスト ボックスでshowstep2ある ID を持つ要素にフォーカスしています。prevOrdQuanあなたは集中したかったと思いますnewOrdQuan。

だから変える

document.getElementById('prevOrdQuan').focus();

に

document.getElementById('newOrdQuan').focus();

そして、それはうまくいくはずです。

編集

また、テキスト ボックスの下にフォーカスできるもの (追加の入力など) も必要です。それ以外の場合、最初の (そして唯一の) テキストボックスでタブを押すと、ブラウザーはアドレスバーにフォーカスを合わせ、次の両方のテキストボックスで onblur イベントを発生させ、両方を同時に表示します。これが私が意味することの例です: http://jsfiddle.net/24TK4/1/

2回目の編集

これは問題のエレガントな解決策だと思います: http://jsfiddle.net/24TK4/2/

HTML コードの と のリンクを見てください。目に見えないリンクが表示されているだけです。

于 2013-10-06T17:25:48.600 に答える