logo标签列表

聚焦于锚点标签

javascriptjqueryhtmlknockout.js
4

我有一些类似于这样的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();
        }
    }

模糊部分工作正常，文本框中的值按预期写回到我的视图模型中，但焦点没有停留在我的链接上。连续按两次回车键应该接受文本框中的值（它确实这样做），然后关闭窗口（它没有）。
你有什么想法可能出了什么问题吗？我没有看到任何错误消息，但显然焦点不在锚链接上，就像我按tab键一样（注意：仅模糊似乎也行不通）。
编辑：我添加了更多的html，因为它可能与此相关。特别是，我正在使用KnockoutJS进行数据绑定，我认为这使得不可能使用几个人建议的jQuery绑定（事件），或者至少，如果我要使用它们，我必须每次“currentFactor”更改时重新绑定它们，因为我认为Knockout正在销毁表格主体中的所有内容，并在该部分更改时重新创建它们。
另一个编辑：首先，非常感谢所有试图帮助到目前为止的人！我真的很感激你们花时间来查看这个问题。
我玩了一下，组合了一个JS Fiddle：

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

起初我很困惑，因为当然它可以正常工作！然后我添加了img的样式，似乎使用sprites的方式破坏了它。如果你从css中删除所有的img样式，它就可以正常工作。但是加上这些样式后，我无法通过编程来聚焦它。 有人以前见过这样的情况吗？
6个回答
2

这是将焦点设置到#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() 链接。因为链接会在 keyup 时触发，所以需要使用 preventDefault。

2

这里有一个简化的示例，我使用了其他答案中的js代码。在我的当前浏览器FF 14上，焦点似乎可以正常工作。

http://jsfiddle.net/ZKYc3/

这是一个在FF 14上可以正常工作的版本

http://jsfiddle.net/ZKYc3/2/，当单击closelInk时，它会弹出警报。双击回车键会触发警报。也许你只需要将事件处理从html中取出，留给jquery来处理即可。

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

我认为你应该遵循它，因为你正在使用knockout

已更新的演示可以正常工作

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

你的代码片段可以运行，但是它使用了jQuery来绑定keypress事件。然而，在我使用with子句时，它似乎无法与knockoutjs一起正常工作（似乎重新评估with子句会移除所有已绑定的jQuery事件）。 - Matt Burland
如果您在图像中添加alt标签（至少在fiddle中），则您的原始代码可以正常工作，但只要您按下回车键，它就会立即开始工作。 - Huangism
@MattBurland 在我的 Fiddle 上焦点会跳到那里，你是否给图片添加了 alt 标签？ - Huangism
看我的fiddle：http://jsfiddle.net/sUh8G/4/ 我认为问题实际上来自于应用于图像的样式。如果我删除图像样式，它就会像你的fiddle一样正常工作。真的很奇怪！ - Matt Burland
@MattBurland 点击这个 jsfiddle 链接 http://jsfiddle.net/sUh8G/5/，它可以正常工作。你应该为锚点设置样式而不是图片。我也在我的答案中更新了这一点。 - Huangism
显示剩余4条评论
1
我会把你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会触发点击事件。如果这是您想要的行为，请使用keydown。否则，keypress将设置焦点到链接上，第二次按下回车键将触发点击事件。

实际上，我最初尝试使用jQuery进行连线，但是在使用“with”子句时与knockoutjs不兼容。更改由with绑定的项目会导致knockout重新创建所有内容并丢失事件连接。 - Matt Burland
嗯，有趣。使用jQuery的.on('keypress', function)而不是.keypress(function)怎么样？也许还可以包含ko代码？ - egbrad
1
function EnterToTabHack(event) {
        if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
            $(".channel").blur();
        }
    }    

$(".channel").blur(function() {
      $("#closeLink").focus();
    });
1
使用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/

0

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

应该改为这个：$("#closeLink").click();

2
但他不想点击它。他只想让它获得焦点，这样当他再次按下回车键时，它就会触发closeZoom()函数。 - Huangism
@cheezSammich：Huangism是正确的。我不想自动点击它，我只想让它高亮显示，这样下一个回车就会关闭它。这给了用户一个机会去看看发生了什么，并在需要时更改值。如果他们对结果满意，他们可以连续按两次回车键，完成操作。 - Matt Burland
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接