使用JQuery捕获CTRL + S的最佳跨浏览器方法?
我的用户希望能够按Ctrl + S来保存表单。 是否有一个很好的跨浏览器捕获Ctrl + S组合键并提交表单?
应用程序build立在Drupal上,所以jQuery是可用的。
$(window).keypress(function(event) { if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true; alert("Ctrl-S pressed"); event.preventDefault(); return false; });
关键代码可以在浏览器之间有所不同,所以你可能需要检查超过115。
这适用于我(使用jquery)重载Ctrl + S , Ctrl + F和Ctrl + G :
$(window).bind('keydown', function(event) { if (event.ctrlKey || event.metaKey) { switch (String.fromCharCode(event.which).toLowerCase()) { case 's': event.preventDefault(); alert('ctrl-s'); break; case 'f': event.preventDefault(); alert('ctrl-f'); break; case 'g': event.preventDefault(); alert('ctrl-g'); break; } } });
您可以使用快捷方式库来处理浏览器特定的东西。
http://www.openjs.com/scripts/events/keyboard_shortcuts/#
shortcut.add("Ctrl+S",function() { alert("Hi there!"); });
这个jQuery解决scheme适用于Chrome和Firefox,适用于Ctrl + S和Cmd + S。
$(document).keydown(function(e) { var key = undefined; var possible = [ e.key, e.keyIdentifier, e.keyCode, e.which ]; while (key === undefined && possible.length > 0) { key = possible.pop(); } if (key && (key == '115' || key == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey)) { e.preventDefault(); alert("Ctrl-s pressed"); return false; } return true; });
这个在Chrome上为我工作…出于某种原因event.which
为我返回一个大写S(83),不知道为什么(不pipe大小写locking状态),所以我使用fromCharCode和toLowerCase只是为了安全
$(document).keydown(function(event) { //19 for Mac Command+S if (!( String.fromCharCode(event.which).toLowerCase() == 's' && event.ctrlKey) && !(event.which == 19)) return true; alert("Ctrl-s pressed"); event.preventDefault(); return false; });
如果有人知道我为什么得到83而不是115,我会很高兴听到,如果有人在其他浏览器上testing,我会很乐意听到它是否有效
我结合了几个选项来支持FireFox,IE和Chrome。 我也更新了它,以更好地支持Mac
// simply disables save event for chrome $(window).keypress(function (event) { if (!(event.which == 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true; event.preventDefault(); return false; }); // used to process the cmd+s and ctrl+s events $(document).keydown(function (event) { if (event.which == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) { event.preventDefault(); save(event); return false; } });
我希望Web应用程序不要覆盖我的默认快捷键,诚实。 Ctrl + S已经在浏览器中做了一些事情。 取决于我正在查看的网站突然发生的变化是破坏性的和令人沮丧的,更不用说经常是越野车。 我已经有网站劫持Ctrl + Tab,因为它看起来像Ctrl + I ,都毁了我的工作在网站上,并阻止我像往常一样切换标签。
如果你想要快捷键,使用accesskey
属性。 请不要破坏现有的浏览器function。
@Eevee:随着浏览器成为更丰富更丰富function的家庭,开始取代桌面应用程序,放弃使用键盘快捷键并不是一种select。 Gmail的丰富而直观的一组键盘命令有助于我放弃Outlook。 Todoist,谷歌阅读器和谷歌日历中的键盘快捷键都让我的生活变得更加轻松,每天都变得更加轻松。
开发人员一定要小心,不要覆盖已经在浏览器中有意义的击键。 例如,我input的WMD文本框莫名其妙地将Ctrl + Del解释为“Blockquote”,而不是“删除单词”。 我很好奇,如果有一个标准列表的某个地方的“浏览器安全”的快捷方式,网站开发人员可以使用和浏览器将承诺远离未来的版本。
$(document).keydown(function(e) { if ((e.key == 's' || e.key == 'S' ) && (e.ctrlKey || e.metaKey)) { e.preventDefault(); alert("Ctrl-s pressed"); return false; } return true; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Try pressing ctrl+s somewhere.
我喜欢这个小插件..需要多一点浏览器的友好,虽然:
这应该工作(从https://stackoverflow.com/a/8285722/388902改编)。;
var ctrl_down = false; var ctrl_key = 17; var s_key = 83; $(document).keydown(function(e) { if (e.keyCode == ctrl_key) ctrl_down = true; }).keyup(function(e) { if (e.keyCode == ctrl_key) ctrl_down = false; }); $(document).keydown(function(e) { if (ctrl_down && (e.keyCode == s_key)) { alert('Ctrl-s pressed'); // Your code return false; } });
我解决了我的问题在IE浏览器,使用警报(“有消息”); 防止默认行为:
window.addEventListener("keydown", function (e) { if(e.ctrlKey || e.metaKey){ e.preventDefault(); //Good browsers if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { //hack for ie alert("Please, use the print button located on the top bar"); return; } } });
例:
shortcut.add("Ctrl+c",function() { alert('Ok...'); } ,{ 'type':'keydown', 'propagate':false, 'target':document });
用法
<script type="text/javascript" src="js/shortcut.js"></script>
下载链接: http : //www.openjs.com/scripts/events/keyboard_shortcuts/#
对于Alan Bellows的回答:!(e.altKey)添加给使用AltGr的用户input时(例如波兰)。 没有这个按下AltGr + S将会得到与Ctrl + S相同的结果
$(document).keydown(function(e) { if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey)) { e.preventDefault(); alert("Ctrl-s pressed"); return false; } return true; });
这个由我做的插件可能会有所帮助。
插入
你可以使用这个插件来提供关键的代码和function,像这样运行
simulatorControl([17,83], function(){ console.log('You have pressed Ctrl+Z'); });
在代码中,我已经显示了如何执行Ctrl + S。 你会得到详细的文件在链接上。 插件是在我的笔在Codepen的JavaScript代码部分。