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>

现在，当您在文本框中并按 Tab 键时，锚标记将获得焦点，因此如果您立即按 Enter，您将运行函数 closeZoom()。这工作正常。

我想要做的是，如果您在文本框中并按 Enter 键，它的行为方式与您按 Tab 键的方式相同。所以我有一个功能来做到这一点：

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

模糊部分工作正常，文本框中的值按我的意愿写回我的视图模型，但焦点并没有最终落在我的链接上。按两次回车应该接受文本框中的值（确实如此），然后关闭窗口（它没有）。

知道这里可能有什么问题吗？我没有看到任何错误消息，但显然焦点不在锚链接上，就像我点击标签时那样（注意：只是模糊似乎也没有这样做）。

编辑：我添加了更多的 html，因为它可能相关，也可能不相关。特别是，我使用 KnockoutJS 进行数据绑定，我认为这使得无法使用几个人建议的 jQuery 绑定（事件）类型，或者至少，如果我要使用它们，我会每次“currentFactor”更改时都必须重新绑定，因为我认为淘汰赛正在做的是破坏桌子主体中的所有内容并在该部分更改时重新创建它。

另一个编辑：首先，非常感谢到目前为止所有试图提供帮助的人！我真的很感谢你花时间来看看这个。

我玩弄了一个 JS Fiddle：

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

起初我很困惑，因为当然，它工作得很好！然后我为 img 添加了样式，似乎以这种方式使用 sprite 会破坏它。如果您从 css 中删除所有 img 样式，它工作正常。有了他们，我无法以编程方式集中注意力。

以前有人见过这样的吗？

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 2 · Accepted Answer

好的，这是一个简化的小提琴，我使用了其他答案之一的 js 代码。重点似乎适用于我当前的浏览器 FF 14

http://jsfiddle.net/ZKYc3/

这是适用于 FF 14 的版本

http://jsfiddle.net/ZKYc3/2/ 点击closelInk时这个有一个警报。双输入触发警报。也许您需要做的就是将事件处理从 html 中取出并留给 jquery 来处理

更新：见http://knockoutjs.com/documentation/event-binding.html

我认为您可能应该遵循这一点，因为您使用的是淘汰赛

更新小提琴工作

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

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();
        }
    });
});

我在这里使用 keypress 而不是 keydown，因为 keydown 会聚焦链接，然后 keyup 会触发 click 事件。如果这是您想要的行为，请使用 keydown。否则，keypress 会将焦点设置到链接上，第二次 enter 按下将触发 click 事件。

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