專注於一個錨標記

我有一些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

專注於一個錨標記

回答

相關問題