Javascript 专注于锚标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11958021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Focus on an anchor tag
提问by Matt Burland
I have some HTML that looks something like this:
我有一些看起来像这样的 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>
Now, when you are in the text box and you hit the tab key, the anchor tags gets focus, so if you immediately hit enter, you'll run the function closeZoom(). This works fine.
现在，当您在文本框中并按 Tab 键时，锚标记将获得焦点，因此如果您立即按 Enter，您将运行函数 closeZoom()。这工作正常。
What I want to do is have so if you are in the textbox and you hit enter, it will behave the same way as if you hit tab. So I have a function to do this:
我想要做的是，如果您在文本框中并按 Enter，它的行为方式与您按 Tab 键的方式相同。所以我有一个功能来做到这一点：
function EnterToTabHack(event) {
if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
$(".channel").blur();
$("#closeLink").focus();
}
}
The blur part works fine, the value in the textbox gets written back to my viewmodel as I wanted, but the focus doesn't end up on my link. Hitting enter twice shouldaccept the value in the textbox (which is does) and then close the window (it doesn't).
模糊部分工作正常，文本框中的值会根据我的需要写回我的视图模型，但焦点并未最终出现在我的链接上。按两次回车应该接受文本框中的值（确实如此），然后关闭窗口（不是）。
Any idea what might be wrong here? I see no error messages, but clearly the focus isn't on the anchor link like it would be if I hit tab (note: just blurring doesn't seem to do it either).
知道这里可能有什么问题吗？我没有看到错误消息，但显然焦点不在锚链接上，就像我点击选项卡一样（注意：只是模糊似乎也没有这样做）。
Edit:I've added a little more of the html because it may, or may not, be relevant. In particular, I'm using KnockoutJS for data binding and I think that is making it impossible to use the type of jQuery bindings (of events) that several people have suggested, or at least, if I were to use them, I'd have to rebind then every time "currentFactor" changed because I thinkwhat knockout is doing is destroying everything in the body of the table and recreating it when that part changes.
编辑：我添加了更多的 html，因为它可能相关，也可能不相关。特别是，我使用 KnockoutJS 进行数据绑定，我认为这使得无法使用几个人建议的 jQuery 绑定（事件）类型，或者至少，如果我要使用它们，我会每次“currentFactor”更改时都必须重新绑定，因为我认为淘汰赛正在破坏表格主体中的所有内容并在该部分更改时重新创建它。
Another Edit:First, a really big thanks to everybody who has tried to help so far! I really appreciate you taking the time to take a look at this.
另一个编辑：首先，非常感谢迄今为止尝试提供帮助的所有人！我真的很感谢你抽出时间来看看这个。
I played around and put together a JS Fiddle:
我玩弄了一个 JS Fiddle：
At first I was confused because, of course, it worked fine! Then I added the styles for the img and it seems that using sprites this way is what breaks it. If you remove all the img styles from the css, it works fine. With them, I can't focus it programmatically.
起初我很困惑，因为当然，它工作得很好！然后我添加了 img 的样式，似乎以这种方式使用精灵会破坏它。如果您从 css 中删除所有 img 样式，它就可以正常工作。有了它们，我无法以编程方式集中注意力。
Anybody seen anything like that before?
以前有人见过这样的吗？
采纳答案by Huangism
Ok here is a simplified fiddle, I used the js code from one of the other answers. The focus seems to work on my current browser FF 14
好的，这是一个简化的小提琴，我使用了其他答案之一中的 js 代码。焦点似乎适用于我当前的浏览器 FF 14
Here is a version that works in FF 14
这是一个适用于 FF 14 的版本
http://jsfiddle.net/ZKYc3/2/this one has a alert when the closelInk is clicked. Double enter triggers the alert. Perhaps all you need to do is take the event handling out of the html and leave it up to jquery to take care of
http://jsfiddle.net/ZKYc3/2/当 closelInk 被点击时，这个有一个警报。双重输入触发警报。也许您需要做的就是将事件处理从 html 中取出并交给 jquery 来处理
Update: see http://knockoutjs.com/documentation/event-binding.html
更新：见http://knockoutjs.com/documentation/event-binding.html
I think you should probably follow that since you are using knockout
我认为您应该遵循这一点，因为您正在使用淘汰赛
Updated fiddle working
更新的小提琴工作
回答by Biotox
This is set the focus to #closeLink
这将焦点设置为 #closeLink
$('.channel').on('keydown', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
e.preventDefault();
$('#closeLink').focus();
}
});
You don't have to set the onkeydown="EnterToTabHack(event);"in the input. The outline does not always show around the URL but the function will focus()the link. The preventDefaultis because the link would trigger when the keyuphappens.
您不必onkeydown="EnterToTabHack(event);"在输入中设置。大纲并不总是显示在 URL 周围，但函数会focus()显示链接。这preventDefault是因为链接会在keyup发生时触发。
回答by ?????
use the keyup event
使用 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"/>
then the js
然后js
function EnterToTabHack(event) {
if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
$("#closeLink").focus();
}
}
回答by indot_brad
I would take the onclick and onkeydown out of your html elements...
我会从你的 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"/>
and use jquery to wire up these events...
并使用 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();
}
});
});
I used keypress here instead of keydown, because keydown will focus the link, and then keyup will fire the click event. If this is the behavior you want, use keydown. Otherwise, keypress will set the focus to the link, and the second enter press will fire the click event.
我在这里使用了 keypress 而不是 keydown，因为 keydown 将聚焦链接，然后 keyup 将触发 click 事件。如果这是您想要的行为，请使用 keydown。否则，keypress 会将焦点设置为链接，第二次按下 Enter 将触发 click 事件。
回答by samuelesque
function EnterToTabHack(event) {
if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
$(".channel").blur();
}
}
$(".channel").blur(function() {
$("#closeLink").focus();
});
回答by cheezSammich
This looks fine, but your last line$("#closeLink").focus();
这看起来不错，但你的最后一行$("#closeLink").focus();
should be changed to this:$("#closeLink").click();
应该改成这样：$("#closeLink").click();
