Fokus auf Textbox nach einem KeyEvent

Question

Was ich versuche zu erreichen ist:

• Auf Alt es soll ein span zeigen, welche Benutzer sagen würde, dass, wenn c jetzt gedrückt wird, wird die textbox auf seinen focus
• Oder auf Alt + c es sollte focus. (Das funktioniert)

Ausgabe: Wenn Altspan zeigt gedrückt wird, und wenn c gefolgt ist nichts passiert. Aber wenn ich c drücke, nachdem ich irgendwo auf die Seite geklickt habe, wird der Fokus gesetzt. Warum das? Und wie repariere ich das?

Unten ist was ich habe.

var lastKey; 
 
$(document).on("keydown", function(e) { 
 
    e.stopPropagation(); 
 
    if (e.altKey) { 
 
    $(".shortcut").fadeIn("slow"); 
 
    if (e.keyCode == 67) { // c 
 
     console.log("filter should open"); 
 
     $(".shortcut").fadeOut("slow"); 
 
     $("#item").focus() 
 
     e.preventDefault(); 
 
     return false; 
 
    } 
 

 
    } 
 
    if (lastKey && e.keyCode == 67) { // c 
 
    $(".shortcut").fadeOut("slow"); 
 
    $("#item").focus() 
 
    e.preventDefault(); 
 
    lastKey = false; 
 
    return false; 
 
    } 
 
    lastKey = true; 
 
});

.shortcut { 
 
    display: none; 
 
} 
 

 
.inputgroup-shortcut { 
 
    position: absolute; 
 
    //top: 25%; 
 
    padding: 3px 5px; 
 
    background: #428bca; 
 
    border-radius: 4px; 
 
    color: white; 
 
    line-height: 1.0; 
 
    font-size: 9px; 
 
    font-weight: bold; 
 
    left: 0px; 
 
    z-index: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="shortcut inputgroup-shortcut">c</span> 
 
<input type="text" id="item" />

Answer 1

Sie müssen e.preventDefault() hinzufügen Alt-Taste, um zu verhindern führen sie im Browser Standard-Aktion ist das heißt die Menüleiste im Browser zu zeigen ....! Aktualisiertes Snippet anzeigen!

var lastKey; 
 
$(document).on("keydown", function(e) { 
 
    e.stopPropagation(); 
 
    if (e.altKey) { 
 
    $(".shortcut").fadeIn("slow"); 
 
    e.preventDefault(); 
 
    if (e.keyCode == 67) { // c 
 
     console.log("filter should open"); 
 
     $(".shortcut").fadeOut("slow"); 
 
     $("#item").focus() 
 
     e.preventDefault(); 
 
     return false; 
 
    } 
 

 
    } 
 
    if (lastKey && e.keyCode == 67) { // c 
 
    $(".shortcut").fadeOut("slow"); 
 
    $("#item").focus() 
 
    e.preventDefault(); 
 
    lastKey = false; 
 
    return false; 
 
    } 
 
    lastKey = true; 
 
});

.shortcut { 
 
    display: none; 
 
} 
 

 
.inputgroup-shortcut { 
 
    position: absolute; 
 
    //top: 25%; 
 
    padding: 3px 5px; 
 
    background: #428bca; 
 
    border-radius: 4px; 
 
    color: white; 
 
    line-height: 1.0; 
 
    font-size: 9px; 
 
    font-weight: bold; 
 
    left: 0px; 
 
    z-index: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="shortcut inputgroup-shortcut">c</span> 
 
<input type="text" id="item" />