如何讓鍵盤標籤專注於div

我做了一個消息框，其上有兩個按鈕。基本上它是一個jQuery插件，與覆蓋效果彈出。但是當消息框出現時，並且用戶按下標籤按鈕，那麼消息對話框就不會聚焦。 那麼我該怎麼做，然後如果我的消息框出現，然後重點自動轉到我的消息框？當焦點丟失並且用戶再次按下標籤按鈕時，它會再次回到我的消息撥號如果我用鼠標點擊消息框然後按下標籤按鈕，然後焦點進入按鈕，然後消失。這裏是圖片 enter image description here 。這是製作這個盒子的代碼。如何讓鍵盤標籤專注於div

var containerDiv = $("<div></div>", { 
    id: config.containerDivID 
}); 

// append all the div to main Div(container) 
containerDiv.append(messageDiv, buttonDiv); 

centerPopup(config, containerDiv); 
loadPopup(config); 

function centerPopup(config, container){ 
    var backgroundPopup = $("<div></div>", { 
     id: "backgroundPopup" 
    }); //end of imageDiv 
    $("body").append(backgroundPopup); 
    $("body").append(container); 
    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 
} //end of centerPopup() 

function loadPopup(config){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#" + config.containerDivID).fadeIn("slow"); 
     popupStatus = 1; 
    } //end of if 
} //end of function loadPopup()

感謝

來源

2012-04-19 Basit

我不知道您是否可以將焦點設置爲DIV。你爲什麼不把注意力放在Yes/No按鈕上？按鈕可以接受焦點。 – 2012-04-19 11:32:05

是的，我的意思是說，按下按鈕時，按鈕應該是焦點。我通過把重點放在消息div上做什麼？我希望當你按Tab鍵時，按鈕應該是焦點。謝謝 – Basit 2012-04-19 13:02:55

你不能將焦點設置DIV。您應該抓住「Tab」鍵按下事件並手動將焦點設置爲「Yes」按鈕。如果「是」按鈕已經有焦點，那麼你應該關注「否」按鈕。

$('body').live('keydown', function(e) { 
    if (is_dialog_visible) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
     e.preventDefault(); 
     if (container.find(".yes").is(":focus")) { 
     container.find(".no").focus(); 
     } else { 
     container.find(".yes").focus(); 
     } 
    } 
    } 
});

來源

2012-04-19 11:44:51

'KeyboardEvent.keyCode'已棄用。改爲使用'KeyboardEvent.key'：'KeyboardEvent.key ===「Tab」'。 – 2016-09-06 07:01:24

嗯，Pavel，tabindex是divs的東西。將其設置爲零，原生HTML5將插入正確的tabindex。請記住，全部小寫。

<div tabindex=0> Stuff Here </div>

這將允許您將div與鍵盤對焦。

<div tabindex=0, autofocus=true> Stuff Here </div> 

$([autofocus]).focus()

這會在渲染時自動關注div。確保您只有一個啓用了自動對焦的元素，否則HTML5會變得混亂。

var $focused = $(':focus');

這將從您的頁面抓取焦點元素。

$focused.click()

這會點擊那個東西。

來源

2014-05-26 17:07:14 taystack

如何讓鍵盤標籤專注於div

回答

相關問題