Jumat, 26 Desember 2014

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/

Tidak ada komentar:

Posting Komentar