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

模糊部分工作正常，文本框中的值会根据需要写回我的viewmodel，但焦点不会在我的链接上结束。点击输入两次应该接受文本框中的值（这是），然后关闭窗口（它没有）。

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

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

另一个编辑：首先，非常感谢迄今为止尝试过帮助的所有人！我非常感谢你花时间看看这个。

我玩弄了一个JS小提琴：

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

起初我很困惑，因为当然，它运作良好！然后我添加了img的样式，似乎以这种方式使用精灵是打破它的原因。如果从css中删除所有img样式，它可以正常工作。有了它们，我无法以编程方式集中注意力。

之前有人见过这样的事吗？

Answer 1

这会将焦点设置为#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发生时会触发链接。

Answer 2

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

http://jsfiddle.net/ZKYc3/

这是一个适用于FF 14的版本

http://jsfiddle.net/ZKYc3/2/这个在点击closelInk时有一个提醒。 Double enter会触发警报。也许您需要做的就是从html中获取事件处理并将其留给jquery来处理

更新：请参阅http://knockoutjs.com/documentation/event-binding.html

我认为你应该遵循这个，因为你正在使用淘汰赛

更新小提琴工作

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

Answer 3

我会从你的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。否则，按键将焦点设置为链接，第二次按下将触发点击事件。

Answer 4

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

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

Answer 5

使用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/

Answer 6

看起来不错，但最后一行$("#closeLink").focus();

应更改为：$("#closeLink").click();

专注于锚标签

6 个答案: