1

今日の午後、Opera の最新バージョンの Web アプリケーションにバグがあり、ちょっと立ち往生してしまいました。

通常、次の属性を指定することで、マークアップのタブ インデックス フローから要素を削除できます。

tabindex="-1"

これは、誰かがページに来て「タブ」キーを押し始めると、ドキュメント内のアンカー/入力をトラバースしますが、-1 が割り当てられた要素は無視されることを意味します。

ただし、Opera の空間ナビゲーション フローでは、ユーザーはキーボードからこれらの要素にアクセスできます。

他のブラウザーでタブキーのドキュメントトラバーサルを使用して要素を削除できるのと同じ方法で、Opera の空間ナビゲーションフローから要素を削除する別の方法を知っている人はいますか?

具体的には、入力ではなく Opera 経由でアンカーにアクセスできないようにすることです。

以下のマークアップは基本的な例を示しています。Opera 以外のブラウザーでは、タブ キーを使用してリストを移動できますが、リンク 3、4、および 7 は tabindex = -1 が設定されているためスキップされます。空間ナビゲーション (Ctrl+下/上矢印) を使用する Opera では、それらのリンクに引き続きフォーカスします。

<html>
    <head>
        <style>
            :focus{border: 1px dashed green}
        </style>
    </head>

    <body>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#" tabindex="-1">Link 3 (tabindex -1)</a></li>
            <li><a href="#" tabindex="-1">Link 4 (tabindex -1)</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
            <li><a href="#" tabindex="-1">Link 7 (tabindex -1)</a></li>
            <li><a href="#">Link 8</a></li>
            <li><a href="#">Link 9</a></li>
        </ul>
    </body>
</html>
4

3 に答える 3

2

これを行う良い方法が見つかりません。のような醜いハックを行うことは可能です<a onfocus="document.moveFocusDown()" tabindex="-1">が、ユーザーが上に行きたいのか下に行きたいのかを判断する良い方法がないため、お勧めしません。 tabindex=-1 要素がフォーカスされており、キーは上下矢印だと思います..

spatnav は tabindex="-1" を尊重する必要があるというバグを報告することをお勧めします - IMO そのままのコードは問題なく、Opera 側でこれを変更することは理にかなっています。あなたがバグを報告したら、適切な開発者の一般的な方向にバグをキックさせていただきます. (私は Opera でテストと QA に取り組んでいます)。

于 2012-03-26T18:06:58.147 に答える
1

この問題に対する私の解決策は、href 属性をデータとしてキャッシュすることでした。フォーカス ループに含めるべきではないリンクごとに、リンクが再びフォーカスを受け取ることができるようになったら、キャッシュされたデータから href を復元します。

http://jsfiddle.net/majornista/5pbFz/46/

于 2012-07-26T00:39:07.393 に答える
1

ご存じのとおり、Opera にはほとんどのブラウザとは異なるタイプのキーボード ナビゲーションがあります。これにより、キーボード ナビゲーションを使用したナビゲーションが非常に簡単になります。

さて、あなたの質問に戻ります... Opera 10.61 1250（Windows 7）で動作します。以下は私のサンプルページです：

<html>
<head>
</head>
<body>
<input type="textbox">
<input type="textbox" style="display:none">
<input type="textbox" tabindex="-1">
<input type="textbox">
</body>
</html>

タブを押すと、2 番目と 3 番目の入力がスキップされます。

これがあなたが持っているものと異なる場合は、コード サンプルを投稿してください。

于 2012-03-26T13:32:36.427 に答える