Konsep Kotak Penelusuran dengan Keyboard

Berikut ini adalah konsep sederhana membuat Kotak Penelusuran dengan menekan keyboard CTRL + F

CSS

.form-search.sticked {
    position: fixed;
    top: 5px;
    left: 50%;
    z-index: 9999;
    margin-left: -122px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}
.form-search .form-search-text {
    display:block;
    border:1px solid #ccc;
    padding:4px;
    margin:0 0;
    width:250px;
    font:inherit;
    line-height:normal;
    color:inherit;
    box-shadow:inset 0 1px 3px -1px rgba(0, 0, 0, .2);
}

HTML

<form action="/search" class="form-search" id="form-search" method="get">
    <input class="form-search-text" name="q" type="text"></input>
</form>

Jquery

(function (a, k) {
    var fs = a('.form-search');
    a(k).on("keydown", function (e) {
        if (e.ctrlKey && e.keyCode == 70) {
            fs.toggleClass("sticked").find(".form-search-text").trigger("focus");
            return false
        }
    });
})(jQuery, document);
Lihat Demo

Coba bereksperimen sendiri dengan key code lain : Key and Character Codes vs. Event Types