レールアプリの「タブオーダー」

Question

レールアプリでは、ユーザーはマウスを使わなくてもデータを入力できるようにしたいと考えています。

これを行うには、カーソルをテキストフィールド、ドロップダウンボックス、およびボタンに移動する順序を設定する必要があります。

これを行う方法はありますか？

Answer 1

私はこれをやってみたことはありませんでしたが（おそらく私はすべきです）。とにかく、w3.orgにはhttp://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-accessがあり、tabindex属性の使用方法について簡単に説明しています。私はあなたが個々にあなたのコントロールにそれを設定しなければならないと思います。少し面倒ですが、恐ろしくないでしょう。

うまくいくかどうかわかりませんが、毎回コントロールリスト全体を並べ替える必要なく、既存のコントロール間に追加を加えることができるように、増分値100を使用することを検討することもできます。

Answer 2

私はレールの男ではありませんが、他のWeb MVC-ishフレームワークを使用しました。ちょっと警告：

フォーム要素を出力しているときは、それぞれに属性（クラス、onchangeなど）を追加することができます。それぞれのtabindex値を設定して、必要に応じて値を増やしていくことで、必要なものを達成できます。結果のhtmlは次のようになります。

<input type="text" id="myInput" tabindex=1 /> 
<select id="mySelect" tabIndex=2> 
    <option id="myOpt1" value="someValue">Foo!</option> 
</select> 

そういうことが起こりそうです。

また、私がいない100％確信しているthis question has already been postedのように:)

Answer 3

に見えますが、私はあなたがあなた自身の順序を管理するためにタブ機能の制御を取ることができたとします。

要素はあなたがどんな入力するか、ドロップダウンメニューを閲覧するために矢印を使用することができ、キーボードを使用して選択されると、その

all_fields = ["field1","field2"] 
current = 0 
if catch event("tab pressed"){ 
current = (current+1) %all_fields.size 
all_fields[current].focus 
} 

のようなものになるだろう擬似コードで

。

また、tabindex http://www.w3.org/TR/html401/interact/forms.htmlを使用することもできますが、決してそれを行っていないので、うまく動作するかどうかわかりません。

最後の解決策は、フィールドを編集したい順番に並べることです。

Answer 4

<%= f.text_field :attribute, :tabindex => 1 %> 

その後2、3、4、等

編集： "tab_index" から除去アンダー。とても近い。

また、あなたは自動的にインデックスをインクリメントするヘルパーメソッドを行うことができます。

def tabindex 
    @tabindex ||= 0 
    @tabindex += 1 
end 

Answer 5

ジェフ・ピーターソンは、ほぼ右です。

<%= f.text_field :attribute, :tabindex => 1 %> 

Answer 6

あなたがsimple_formを使用している場合は、そのようにそれを行う必要があります：私が取る場合

<%= f.input :name, input_html: {:tabindex => 1} %>