专注于一个锚标记

我有一些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键，锚标签获得焦点，因此，如果您立即回车，你将运行closeZoom（）函数。这工作正常。

我想要做的是如果你在文本框中，并且你按下回车键，它的行为方式与按Tab键时一样。所以，我有一个函数来做到这一点：

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

模糊部分工作正常，在文本框中的值被写回到我的视图模型，因为我想要的，但重点不我的链接结束。击中输入两次应该接受文本框中的值（这是），然后关闭窗口（它不）。

任何想法这里可能是错误的？我看不到任何错误消息，但显然重点不在于锚点链接上，如果我点击标签（注意：只是模糊似乎也没有做到这一点）。

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

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

我打过来，把一起JS小提琴：

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

起初我很困惑，因为，当然，它工作得很好！然后我添加了img的样式，看起来用这种方式使用精灵是什么打破它。如果你从CSS中删除所有的img样式，它可以正常工作。与他们在一起，我不能以编程方式集中它。

以前有人看过类似的东西吗？

来源

2012-08-14 Matt Burland

好的，这里是一个简化的小提琴，我用其他答案之一的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/

来源

2012-08-14 18:24:13 Huangism

你的小提琴可以工作，但它使用jQuery来连接按键事件。当我使用with子句时（似乎重新评估with子句删除所有jQuery有线事件），这似乎不适用于knockoutjs。 – 2012-08-14 18:36:44

如果您在图像中添加alt标签（至少在小提琴中），您的原始代码将起作用，只要您一按即输入一次即可运行 – Huangism 2012-08-14 20:27:21

@MattBurland使其工作的唯一方法是将原始的onkeydown更改为onkeyup为输入标签。其他任何事情都会触发点击事件1点击太早或根本没有点击。这是没有绑定使用jQuery的事件，以避免冲突 – Huangism 2012-08-14 21:00:40

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

应该改成这样：$("#closeLink").click();

来源

2012-08-14 18:05:26 cheezSammich

但点击它。他只是想知道它是否有重点，所以当他再次进入时会触发closeZoom（） – Huangism 2012-08-14 18:06:46

@cheezSammich：黄原理是正确的。我不想自动点击它，我只是想突出显示，所以下一个输入将关闭它。这使用户有机会看到发生了什么并且如果他们想要改变它的值。如果他们对结果满意，他们可以将输入按钮两次捣碎，然后完成。 – 2012-08-14 18:10:32

我将采取的onclick和的onkeydown你的HTML元素...

<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，因为keydown会关注链接，然后keyup会触发click事件。如果这是您想要的行为，请使用keydown。否则，按键会将焦点设置到链接上，第二次按下按键会触发点击事件。

来源

2012-08-14 18:13:30

其实我最初尝试使用jQuery进行连线，但在使用“with”子句时它不会与knockoutjs一起玩。通过导致淘汰赛来更改绑定的项目以重新创建所有内容并丢失事件接线。 – 2012-08-14 18:31:40

嗯，有趣。如何使用jQuery'.on（'keypress'，function）'而不是'.keypress（function）'？也许还包括ko代码？ – 2012-08-14 18:39:48

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

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

来源

2012-08-14 18:13:35 samuelesque

这将焦点设置到

$('.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发生时触发。

来源

2012-08-14 18:15:02 Biotox

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

来源

2012-08-14 18:50:36

专注于一个锚标记

回答

相关问题