Konsep Kotak Penelusuran dengan Keyboard

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

CSS

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-19.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

1code-line:2-12code-line:2-23code-line:2-3<form action="/search" class="form-search" id="form-search" method="get">
    <input class="form-search-text" name="q" type="text"></input>
</form>

Jquery

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-9(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