◄ Min  Size Fonts: + | - | ± Color: Max ►

Add Control Search Box with Keyboard use jQuery

AA Koben menemukan satu artikel cool dengan judul "Konsep Kotak Penelusuran dengan Keyboard" by kowe sopan :D Satu konsep jQuery script yang memungkinkan kita dapat melakukan customize pada search box alias kotak pencarian agar dapat dioperasikan lewat keyboard! Sobat bisa menampilkan kotak searching dengan shortcut dari kibor yg sudah dibuat dengan bantuan jQuery.
Demo:
bit.ly/1tkLgxF
.form-search.sticked {
    position: fixed;
    top: 5px;
    left: 50%;
    z-index: 9999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    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 auto;
    width:275px;
    font:inherit;
    line-height:normal;
    color:inherit;
    box-shadow:inset 0 1px 3px -1px rgba(0, 0, 0, .2);
}
<form action="/search" class="form-search" method="get">
<input class="form-search-text" name="q" type="text"></input>
</form>
<script type='text/javascript'>//<![CDATA[
(function (a, k) {
    var fs = a('.form-search');
    a(k).on("keydown", function (e) {
        if (e.ctrlKey && e.keyCode == 83) {
            fs.toggleClass("sticked").find(".form-search-text").trigger("focus");
            return false
        }
    });
})(jQuery, document);
//]]></script>
Perhatikan script e.keyCode == 83 angka itu bisa kalian ganti sesuai dengan shortcut kemauan. Please visit Keyboard Events and Codes by w3.org for get key and character codes vs event types. Loh kok pencet Ctrl + S malah kotak pencarian yg keluar :)) =))
Resource: obesitystrike.blogspot.com/2014/12/konsep-kotak-penelusuran-dengan-keyboard.html

Happy coding \m/

Loading...
XAdd Control Search Box with Keyboard use jQuery
Membuat kendali atas kotak pencarian dengan menanamkan shortcut keyboard dengan jQuery script.
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE