web-dev-qa-db-ja.com

<span>要素をフォーム内の通常のタブストップにするにはどうすればよいですか？

コンテナとして使用するフォームコントロールを作成しました（以下の「はい/いいえ」トグルを参照）

toggle example
そのためのコードは次のとおりです。

<span class="toggle">
    <i>Yes</i>
    <i>No</i>
    <input type="hidden" name="toggle-value" value="0">
</span>

私のCSSは質問とは関係ありませんが、私のコントロールを理解するために含まれています。

.toggle { width:auto; height: 20px; display: inline-block; position: relative;  cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }  
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1;  background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1;  background-color: #fff; } /* circle */

そしてそれをすべて機能させるJS：

.on('click', '.toggle', function(){
    var input = $(this).next('input');
        if(input.val() == 1) {
            $(this).removeClass('on').addClass('off');
            input.val(0).change();
        } else {
            $(this).removeClass('off').addClass('on');
            input.val(1).change();
        }
}

問題はこれをアプリケーション全体でデータ入力に使用していることです。大量のデータを入力するときにマウスを使用したくないと思ったことはありませんか？うん、私も。したがって、Tabキーを押すと、このようなトグルがスペースバーに応答するはずです。しかし、代わりに、それは単なる要素であるため、完全にスキップされます。

「これをタブストップにして正しい順序にする」という質問を誰かが解決するのを手伝ってくれることを願っています。

==============編集：ここISソリューションを含む更新されたJQUERYコード：

$('.toggle').click(function(){
    var input = $(this).next('input');
        if(input.val() == 1) {
            $(this).removeClass('on').addClass('off');
            input.val(0).change();
        } else {
            $(this).removeClass('off').addClass('on');
            input.val(1).change();
        }
}).focus(function() {
    $(this).bind('keydown', 'space', function(e){
        $(this).trigger('click')
        e.preventDefault();
    });

}).blur(function() {
    $(this).unbind('keydown');

}).attr('tabIndex', 0);
javascriptjqueryhtmlcsstoggle
13
mydoglixu

「タブ可能」にしたい非アンカー要素で、tabindexを0に設定してみてください。例えば ​​tabindex="0"。このように、タブの順序を台無しにしたり、タブインデックスをあちこちに投げたりする必要はありません。

23
bruh

Html属性を調べてください tabindex 。基本的に、タブキーを使用してフォーカス可能にする各入力にtabindexを設定できるはずです。最初のものを1で開始し、入力ごとにカウントアップします。 Tabキーを使用してフォーカスから入力を外したい場合は、tabindexを-1に設定します。

0
Adam Merrifield