2016-09-07 9 views
0

私の質問: タブを介して隠れた入力要素にアクセスするには?隠し入力要素にアクセスする

詳細説明:私のウェブサイト上で

、私は視界のどれも設定されていないと、カスタム設計を取得する前に要素をカスタマイズしたラジオボタンのために。

タブを介して入力タイプのラジオにアクセスしようとすると、表示が隠されているため、できません。

誰も私にタブで隠れた入力要素にアクセスする方法を教えてもらえますか?

サイト

Demo Form

は、あなたがそこにフォームを見つけるだろう、上記のリンクをご覧ください。さあ、ラジオボタンにアクセスしてみてください。ラジオボタンをスキップします。

答えて

2

tabindexをサポートしているタブフロー内にアイテムが必要です。ラジオボタンが非表示になっているため、動作しません。あなたはaタグであなたのliタグのそれぞれの内側の要素をラップし、それをあなたの流れの中で働くのtabindexを割り当てることができますので、しかし、サポートタブインデックスを行いアンカータグ...

変更:

<li tabindex="0" class="radio gchoice_2_14_0"> 
    <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);"> 
    <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018 
    </label> 
</li> 

<li tabindex="0" class="radio gchoice_2_14_0"> 
    <a tabindex="1010"> 
     <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);"> 
     <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018 
     </label> 
    </a> 
</li> 

これにアンカータグの焦点あなたのタブを提供します(お尻前の要素のtabindexが '1009'以下であること)。

これはタブへの質問の回答です。今、あなたがそれを持っていることを、あなたはカップルのことを行う必要があります:

  1. スタイル要素のCSSをform li.radio a:focusためにあなたが合うように。
  2. a要素のキープレスイベントを設定し、フォーカスが当たっているときにEnterキーを押しながら実際に偽のラジオボタンを選択できるようにします。
+0

'a'は' input'/'label'子孫を持たないかもしれません。 – unor

+0

ロバートに感謝して、隠し要素にタブでアクセスできないことを明確にしてください。したがって、親要素にtabindexを追加し、いくつかのjavascriptを使用しました。 –