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
Demo: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
search boxalias
kotak pencarianagar 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 == Resource: obesitystrike.blogspot.com/2014/12/konsep-kotak-penelusuran-dengan-keyboard.html
Happy coding \m/
Loading... |
2 comments
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/...