動的フォームのTabIndex（要素は大文字と小文字で区別されます）問題

フォームに入力された値の条件によっては、フィールドが表示される複雑なフォームを作成しています。フォームが<Tab>キーを介して入力されるしかし動的フォームのTabIndex（要素は大文字と小文字で区別されます）問題

、（<Tab>キー - >付加価値><Tab>キーを入力してください）、それは、新たに登場し、フィールドに行くが、以前に表示されていたものにしません。

以下は簡略化した例です。番号1のフィールドに何かを書き込むと、変更イベントがトリガーされ、値2の入力が表示されますが、次のフィールドはフォーカスされません。

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<form> 
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()"> 
    <input id="input2" value="2" tabindex="2" style="display: none;"> 
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()"> 
    <input id="input4" value="4" tabindex="4" style="display: none;"> 
    <input id="input5" value="5" tabindex="5"> 
    <input id="input6" value="6" tabindex="6"> 
</form>

、その複雑さのために、私は <Tab>キーの直接制御と遊ぶのが好きではないでしょう。また、 onchange="$('#input2').show();$('#input2').focus()"は、すぐ次の要素でない場合にも同じコードが使用されるため、使用できません。これを解決する方法はありますか？

コメント/ご提案ありがとうございます。

出典

2012-01-25 Sale

Iは 'onchange'は' SELECT'（ここでFFは、主な問題のブラウザである）にあった同様の問題を抱えていました。私は 'keyup'と同じアクションをbindすることで解決しました。 BTW：あなたのJSをあなたのHTMLから守ってください（あるいは、この例ではJSだけを混ぜていますか？） –

click here for a working solution on jsFiddle.

私はこの仕事をするためにキー操作を使用していました。

この例では、テキストフィールド1、テキスト3、テキストフィールド5で前後にタブを移動し、テキストフィールド2のテキストフィールド1の値を変更できます。次に、テキストフィールド2,3、および5にタブすることができます。

私はあなたの挑戦を正しく理解しており、これが役立つことを願っています。乾杯。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("input").live("keypress", function() { 
      $(this).next().show() 
     }) 
     }) 
    </script> 

    <style type="text/css"> 
     .hidden { 
     display:none; 
     } 
    </style> 
</head> 
<body> 
<form> 
    <input id="input1" value="1"> 
    <input id="input2" value="2" class="hidden"> 
    <input id="input3" value="3"> 
    <input id="input4" value="4" class="hidden"> 
    <input id="input5" value="5"> 
    <input id="input6" value="6" class="hidden"> 
</form> 
</body> 
</html>

出典

2012-10-12 12:19:04

動的フォームのTabIndex（要素は大文字と小文字で区別されます）問題

答えて

関連する問題