web-dev-qa-db-ja.com

特定の要素がフォーカスを受けないようにする

だから私は次の機能を持っています。すべての要素でフォーカスイベントをリッスンします。その要素が$mobileMenuまたは$menuItemsのいずれかにある場合、それを許可します。それ以外の場合は、フォーカスを削除します。

var $body = $("body");
var $mobileMenu = $("#mobile-menu");
var $menuItems = $("#main-menu a");

$body.on("focus.spf", "*", function(e){
  e.stopPropagation();
  $this = $(this);

  // Prevent items from recieving focus and switching view
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
  } else {
    console.log(this);
  }
})

私が抱えている問題は、同じ要素に何度も何度も再フォーカスしようとするため、現在フォーカス不可能な現在フォーカス可能な要素が私のホワイトリストの要素の前にある場合、ユーザーが何かに焦点を合わせることができないことです。

誰かが代わりに次のフォーカス可能な要素にスキップするように言う方法を知っていますか？

javascriptjqueryhtmlaccessibility
15
George Reith

これは動作します（更新）：

$body.on("focus.spt", "*", function(e){
  $this = $(this);
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
    var next=$this.nextAll().find('a,input');
    if (next.length>0) next[0].focus();
  } else {
    console.log('ok',this);
    e.stopPropagation();
  }
})

（更新済み）fiddle->http://jsfiddle.net/CADjc/どの要素がコンソールに表示されますフォーカスを受け取る(main-menu aおよびmobile-menu）

でテスト：

<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
    <div id="main-menu">
        <a tabindex="4">main-menu</a>
        <a tabindex="5">main-menu</a>
    </div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>
4
davidkonrad

要素でtabindexを「-1」に設定すると、タブは無視されます。これがすべてのブラウザで機能するかどうかはわかりませんが、Google Chromeでは機能します。

<input type="text" tabindex="-1"/>
5
npn_or_pnp

attr（ "readonly"、 "readonly"）は、入力フォーカスと値がサーバーに送信されるのを防ぎます。

3
mr. programmer

無効にしたものはフォーカスされません。例えば：

<input type="text" disabled="disabled" />

プログラムで追加してください：

var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');
2
Harry Pehkonen