javascript - アンカータグにフォーカス

Question

次のような HTML があります。

            <div id="zoomed" style="display:none; position:absolute;">
            <a href="#" alt="close" id="closeLink" onclick="closeZoom();" tabindex="2"><img alt="close" style="border-style:none" class="close" id="closeButton" src="Images/trans.png"/></a>
            <div class="zoomParent">
            <table>
                <tbody data-bind="with: currentFactor">
                    <tr><td class="zIngHeader" colspan="3">
                    <span data-bind="text: FactorName"></span>
                    </td>
                    </tr>
                    <tr>
                        <td class="zMin" data-bind="text: formatValues(Min)"></td>
                        <td><input type="text" data-bind="value: currentValue" class="channel" onkeydown="EnterToTabHack(event);" tabindex="1"/></td>
                        <td class="zMax" data-bind="text: formatValues(Max)"></td>
                    </tr>
                    <tr><td colspan="3" class="graphCell" data-bind="animateColor: $root.statusColor"><div id="zoomPlot" class="zoomPlotStyle"></div></td></tr>
                </tbody>
            </table>
            </div>
        </div>

ここで、テキストボックス内でタブキーを押すと、アンカータグがフォーカスされるので、すぐに Enter キーを押すと、関数 closeZoom() が実行されます。これはうまくいきます。

私がやりたいのは、テキストボックスにいてEnterキーを押すと、タブを押した場合と同じように動作することです。だから私はこれを行う機能を持っています:

    function EnterToTabHack(event) {
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
            $(".channel").blur();
            $("#closeLink").focus();
        }
    }

ぼかし部分は正常に機能し、テキストボックスの値はビューモデルに書き戻されますが、リンクに焦点が当てられません。Enterキーを2回押すと、テキストボックスの値が受け入れられ（受け入れられます）、ウィンドウが閉じられます（受け入れられません）。

ここで何が間違っているのでしょうか？エラーメッセージは表示されませんが、タブを押した場合のようにアンカーリンクに焦点が合っていないことは明らかです（注：ぼやけているだけではうまくいかないようです）。

編集:関連する場合と関連しない場合があるため、html をもう少し追加しました。特に、私はデータバインディングに KnockoutJS を使用しています。そのため、複数の人が提案している (イベントの) jQuery バインディングのタイプを使用できなくなっていると思います。「currentFactor」が変更されるたびに再バインドする必要があります。ノックアウトが行っていることは、テーブルの本体のすべてを破壊し、その部分が変更されたときにそれを再作成することだと思うからです。

別の編集:まず、これまで助けようとしてくれたすべての人に本当に感謝します! お時間を割いてご覧いただき、誠にありがとうございます。

私は遊んで、JS Fiddleをまとめました：

http://jsfiddle.net/sUh8G/4/

もちろん、うまく機能したので、最初は戸惑いました。次に、img のスタイルを追加しましたが、この方法でスプライトを使用すると、それが壊れているようです。css からすべての img スタイルを削除すると、正常に動作します。それらを使用すると、プログラムで集中することはできません。

前にそのようなものを見た人はいますか？

score 2 · Accepted Answer

これは単純化されたフィドルです。他の回答の1つからのjsコードを使用しました。フォーカスは、現在のブラウザー FF 14 で動作しているようです

http://jsfiddle.net/ZKYc3/

これはFF14で動作するバージョンです

http://jsfiddle.net/ZKYc3/2/ これには、closelInk がクリックされたときにアラートが表示されます。2 回入力すると、アラートがトリガーされます。おそらく、イベント処理を html から取り出して、jquery に任せるだけで十分です。

更新: http://knockoutjs.com/documentation/event-binding.htmlを参照してください

ノックアウトを使用しているので、おそらくそれに従うべきだと思います

更新されたフィドルの動作

http://jsfiddle.net/sUh8G/5/

score 2 · Accepted Answer

これにフォーカスが設定されています#closeLink

$('.channel').on('keydown', function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) {
        e.preventDefault();
        $('#closeLink').focus();
    }
});

入力にを設定する必要はありませんonkeydown="EnterToTabHack(event);"。アウトラインは常に URL の周囲に表示されるとは限りませんが、関数はfocus()リンクになります。これpreventDefaultは、リンクが発生したときにトリガーされるためkeyupです。

score 1 · Accepted Answer

私はあなたのhtml要素からonclickとonkeydownを取り除きます...

<a href="#" id="closeLink" tabindex="2"><img class="close" style="border-style:none" id="closeButton" src="Images/trans.png"/></a>

<input type="text" data-bind="value: currentValue" class="channel" tabindex="1"/>

jquery を使用してこれらのイベントを結び付けます...

$(function(){
    $('#closeLink').click(closeZoom);

    $('.channel').keypress(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
           $(".channel").blur();
           $("#closeLink").focus();
        }
    });
});

ここでは、keydown の代わりに keypress を使用しました。これは、keydown がリンクにフォーカスし、keyup がクリックイベントを発生させるためです。これが必要な動作である場合は、keydown を使用してください。それ以外の場合、キーを押すとフォーカスがリンクに設定され、2 回目の Enter キーを押すとクリックイベントが発生します。

score 1 · Accepted Answer

function EnterToTabHack(event) {
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
            $(".channel").blur();
        }
    }    

$(".channel").blur(function() {
      $("#closeLink").focus();
    });

score 1 · Accepted Answer

keyup イベントを使用する

<a href="#" id="closeLink" onclick="closeZoom();" tabindex="2" ><img alt='testtesttest' class="close" style="border-style:none" id="closeButton" src="Images/trans.png"/></a>

<input type="text" data-bind="value: currentValue" class="channel" onkeyup="EnterToTabHack(event);" tabindex="1"/>

次にjs

function EnterToTabHack(event) {   
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {        
            $("#closeLink").focus();
        }
}

http://jsfiddle.net/wirey00/KcRyV/

score 0 · Accepted Answer

これは問題ないように見えますが、最後の行$("#closeLink").focus();

これに変更する必要があります：$("#closeLink").click();

javascript - アンカータグにフォーカス

6 に答える 6

Related

Reference