入力をナビゲートするためにhtml形式のマウスの代わりに矢印を使用

Question

こんにちはすべて私は私の母親のために作ったいくつかの簡単なhtml形式を持っているので、彼女は彼女の家の状態の記録を保つことができるように最近骨粗鬆症彼女がマウスを使用することは非常に困難です。

フォームに機能を追加して、矢印キーを使用して1つの入力ボックスから次の入力ボックスに移動し、ドロップダウンボックスから選択できる方法があるかどうか聞いてきました。

これは簡単な方法で実装できますか、それともかなり進歩していますか？

私の知識は限られているので、フォームは何も特別なものではなく、私の2年目をuniで始めて6ヶ月間htmlでカバーしました。ここに私が彼女のために作ったフォームへのリンクがあるので、あなたは私が何を意味するのか考えている。

my form websiteこれは可能性がどのように誰かがいくつかの私を

でした「その携帯電話に収まるように作られたが、私はモバイルCSSにリダイレクトし、メタタグを使用するようにJSを使用して、より良いサイトを作った、再びこの1つは基本的なものです」フォームで行ってください:)。彼女は後方に行くことTABキーまたはSHIFT + TABを使用することができ、あなたは、特定の順序を設定するためのフォームを編集することができます - EDD

Answer 1

から

多くのおかげで私のコメントに展開するにはtabindexを使用しています。

真ん中要素でスタートし、それがどのように動作するかを確認するためにTABとSHIFT + TABを使用します。

<label>2</label><input tabindex="2" /> 
 
<label>1</label><input tabindex="1" /> 
 
<label>3</label><input tabindex="3" />

Answer 2

Tabキーがこのtabindex HTMLを使用してい属性。あなたは、矢印キーのイベントを結合し、各要素に対してarrow-togglableクラスを置くことによってあまりにたい場合は、間を切り替えたい矢印を押すためにこれを模倣する：

var elements = document.getElementsByClassName("arrow-togglable"); 
 
    var currentIndex = 0; 
 

 
    document.onkeydown = function(e) { 
 
     switch (e.keyCode) { 
 
     case 38: 
 
      currentIndex = (currentIndex == 0) ? elements.length - 1 : --currentIndex; 
 
      elements[currentIndex].focus(); 
 
      break; 
 
     case 40: 
 
      currentIndex = ((currentIndex + 1) == elements.length) ? 0 : ++currentIndex; 
 
      elements[currentIndex].focus(); 
 
      break; 
 
     } 
 
    };

input { margin: 5px 0; }

<input type="text" class="arrow-togglable"><br/> 
 
<input type="text" class="arrow-togglable"><br/> 
 
<input type="text" class="arrow-togglable">

Answer 3

完璧に動作しているあなたにニックをありがとう:)、JavaScriptはわかりやすいですが、私はcurrentindexを使用していませんので、これについてもっと学びます.Nickにもう一度感謝します。