2012-01-17 61 views
0

我有一個div元素,我在其中動態生成輸入字段和圖像。當我點擊輸入字段然後使用tab鍵時,圖像獲得焦點。jquery - 當圖像變焦時觸發點擊事件

我想做

什麼,當圖像有重點,我想觸發進入關鍵事件。

HTML

<div id="myDiv"></div> 

JQuery的

$(document).ready(function(){ 
    $("div#myDiv").html("<input type='text' tabindex='1'></input><a><img src='icon.gif' tabindex='2'></img></a>"); 
}); 
+0

你是否觸發了一個關鍵事件來調用另一個處理程序?如果是這樣,爲什麼不把處理程序代碼放到一個函數中並從兩者中調用它? – StuperUser 2012-01-17 17:13:47

回答

1

只是我們focus事件的圖像。我在圖像中添加了focustrigger類,以便此代碼不適用於所有img元素。

$(document).ready(function(){ 
    $("div#myDiv").html("<input type='text' tabindex='1'></input><a><img src='icon.gif' class='focustrigger' tabindex='2'></img></a>"); 

    $('.focustrigger').focus(function() { 
     // Trigger your "enter key event" here. 
    }); 
}); 
0

假設你的手柄上的回車鍵事件是這樣的:

$("#myDiv input").keypress(function(evt) { 
    var code = evt.keyCode ? evt.keyCode : evt.which; 
    if (code == 13) alert("OK"); 
}); 

你可以用它來觸發它當圖像獲得焦點:

$("#myDiv img").focus(function() { 
    var evt = jQuery.Event('keypress'); 
    evt.keyCode = 13; 
    $("#myDiv input").trigger(evt); 
}); 
+0

你可以使用'evt.which'。 jQuery使它跨瀏覽器兼容。 – 2012-01-17 17:26:46

0

這裏有一個例子是什麼您需要:

http://jsbin.com/upowip

右上角有一個編輯鏈接,或者只是查看源代碼。

+0

其實在我的例子中,你可以把任何東西放在「on」函數中來處理任何事情。您可以在img上處理keypress事件並檢查輸入密鑰代碼。 – 2012-01-17 17:29:31