需求:监听Ctrl + F 键,执行搜索框显示,并光标定位到搜索框。
知识储备:
1、键盘按键键码值(keyCode),字母和数字键的键码值 (keyCode)
2、监听ctrl(cmd)+ s事件:
document.onkeydown = function(e) { var keyCode = e.keyCode || e.which || e.charCode; var ctrlKey = e.ctrlKey || e.metaKey; if(ctrlKey && keyCode == 83) { alert('按住了 CTRL+S'); } e.preventDefault(); return false; }
综合实现代码如下:
搜索框id为search,先前通过css设置display属性为none
$(function(){ if(window.localStorage.getItem("search") == 'yes'){ document.getElementById("search").style.display="block"; }else{ document.onkeydown = function(e) { var keyCode = e.keyCode || e.which || e.charCode; var ctrlKey = e.ctrlKey || e.metaKey; if(ctrlKey && keyCode == 70) { window.localStorage.setItem("search", "yes"); document.getElementById("search").style.display="block"; document.getElementById('s').select(); e.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 }, 500); return false; } } } });
前提:引入jQuery,使用cookie记录,是为了避免一直监听按键导致输入失效。
参考资料:
大佬,问下底栏鱼的动画是如何加的