So ermöglichen Sie Tastatur-Registerkarte fokussieren auf div

Machte ich eine message-box auf dem es zwei Schaltflächen. Im Grunde ist es ein jQuery-plugin, das popup-Fenster mit der overlay-Effekt. Aber wenn die message-box wird angezeigt, und der Benutzer drücken Sie die tab-Taste, dann die Nachricht-dialog nicht den Fokus. Also, wie kann ich es dann tun, wenn meine message-box erscheinen, dann konzentrieren Sie gehen, um meine message-box automatisch? und wenn der Fokus verlieren und der Benutzer drücken Sie die tab-Taste erneut, dann wieder comeback auf meine Nachricht dialig Wenn ich auf die message-box mit der Maus und drücken Sie dann die tab-Taste, um den Fokus kommt auf die Schaltfläche und dann gegangen. Hier ist das Bild So ermöglichen Sie Tastatur-Registerkarte fokussieren auf div. Hier ist der code, damit das Feld. 

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()

Dank

Ich weiß nicht, ob Sie den Fokus auf DIV. Warum nicht setzen Sie den Fokus auf die ja/Nein-buttons? - Taste kann der Fokus akzeptieren.
ja, ich wollte sagen , sollte die Schaltfläche den Fokus, wenn Sie drücken Sie die tab-Tasten. Was muss ich tun, durch die Einstellung von Fokus auf die Nachricht div? ich möchte, dass beim drücken der tab-Taste, dann die Taste focus. Dank

InformationsquelleAutor Basit | 2012-04-19

  1. 0

    Können Sie nicht setzen Sie den Fokus auf div. Sie fangen sollte "Tab" - Taste drücken-Ereignis und setzen den Fokus auf "ja" - button manuell. Wenn "ja" - button schon den Fokus hat, dann sollten Sie sich konzentrieren, "Nein" - button.

    $('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();
      }
    }
  } 
});
    KeyboardEvent.keyCode ist veraltet. Verwenden KeyboardEvent.key statt: KeyboardEvent.key === "Tab".

    InformationsquelleAutor Pavel Strakhov

  2. 14

    tabindex ist eine Sache für divs. Setzen Sie ihn auf null und native HTML5 werden legen Sie die korrekte tabindex. Denken Sie daran, alles in Kleinbuchstaben:

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

    Dies ermöglicht es Ihnen, den Fokus der div mit der Tastatur.

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

//select it with

document.querySelector("[autofocus]").focus();

//or with smelly jQuery

$([autofocus]).focus();

    Wenn Sie mit jQuery sind, können Sie die gewünschte div einfach mit:

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

    Dann Dinge tun, wie .click():

    $focused.click()

    Dieser wird auf das Ding.

    InformationsquelleAutor taystack

Schreibe einen Kommentar