アンカーHTML要素のスペースバーキーを押してもクリックイベントが発生しません。これをどうするの？

Question

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"/><span>Save & Add Another</span></a> 

私のページに上記のアンカー要素があります。これはボタンのように見えるので、ボタンとして扱われます。問題は次のとおりです。ユーザーはマウスを使用してマウスをクリックしたり、マウスに触れたりすることはしませんが、タブを使用してこのアンカー要素を強調表示し、「スペースバー」または「戻る」キーを使用してクリックします。ユーザーがスペースバーまたはリターンキーを押すと、JavaScript関数を呼び出すことができます。私はonkeypressイベントを試したが、それは助けにはならない。何か案が？

Answer 1

最初に、あなたのHTMLに問題があります。 Aの短い構文を使用しています。つまり、テキストは実際にAのコンテンツの一部ではありません。多くのブラウザは、とにかくAタグの短い構文が好きではありません。あなたのせいではありませんが、ブラウザよりも寛容であることが私たちの仕事です。

ここで修正されたバージョンです：

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"><span>Save & Add Another</span></a> 

はブラウザやDOCTYPEによっては、イベント名はすべて小文字であるか否かが重要です。探しているだけのもの。

最後に、デフォルトでは、onclickイベントはクリックに対してのみ発生し、Enterはスペースバーでは発生しません。多くのブラウザでは、スペースバーをpagedownとして扱います。このAのスペースバーイベントをキャプチャしてEnterのように扱いたい場合は、スペースバーを探すkeypressイベントを定義する必要があります。これと同じように：

function addNewKeys(event) { 
    if(!event) var event = window.event; // cross-browser shenanigans 
    if(event.keyCode === 32) { // this is the spacebar 
     saveTdsAddNew(event); 
    } 
    return true; // treat all other keys normally; 
} 

（そのAのonkeypressではこの新しい機能をバインドすることを忘れないでください。）私はeventsaveTdsAddNew関数に渡している

注意を。なぜなら、イベントハンドラは通常、引数としてeventオブジェクトを受け取るので、これは既存のパターンを保持するからです。 eventから、クリック/キー入力された要素を取得することができます。

Answer 2

私は個人的にこれをやろうとはしませんでしたが、ハイパーリンク上でキー入力イベントを設定するだけでもう少し複雑です。

ハイパーリンクがフォーカスされているかどうかを確認するために、ドキュメントレベルでキー押しを処理してから、必要なコードを実行する必要があると思います。

HTMLからオンクリックイベントを分離することも重要です。