我的用户希望能够通过按下 Ctrl+S 来保存表单。有没有一种良好的跨浏览器的方式来捕获 Ctrl+S 组合键并提交表单呢?
应用程序是基于Drupal构建的,因此可以使用jQuery。
我的用户希望能够通过按下 Ctrl+S 来保存表单。有没有一种良好的跨浏览器的方式来捕获 Ctrl+S 组合键并提交表单呢?
应用程序是基于Drupal构建的,因此可以使用jQuery。
以下是我使用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;
}
}
});
$(window).keypress(function(event) {
if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
alert("Ctrl-S pressed");
event.preventDefault();
return false;
});
按键代码在不同的浏览器中可能不同,因此您可能需要检查的不仅仅是115。
keydown
替代keypress
。 - destan你可以使用一个快捷键库来处理浏览器特定的问题。
shortcut.add("Ctrl+S",function() {
alert("Hi there!");
});
这个jQuery解决方案在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;
});
e.key
而不是 e.which
; - Cannicide这个方法在Chrome上对我有效...由于某种原因,event.which
对我返回的是一个大写的 S(83),不确定为什么(无论大写锁定键状态如何),所以我使用了 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,请告诉我,如果有人在其他浏览器上测试它是否有效,我也很乐意听到反馈。
我结合了几个选项来支持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;
}
});
$(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.
key
替换了which
。即使在Chrome的大写键故障下也可以使用(按下Ctrl+S发送大写S而不是小写s)。适用于所有现代浏览器。accesskey
属性。请不要破坏现有浏览器功能。@Eevee: 随着浏览器成为丰富功能的家园并开始取代桌面应用程序,放弃使用键盘快捷键将不再是一个选择。Gmail丰富而直观的键盘命令集对我放弃Outlook的意愿起到了关键作用。Todoist、Google Reader和Google Calendar中的键盘快捷键都使我的日常生活变得更加轻松。
开发人员一定要注意不要覆盖浏览器中已有含义的按键。例如,我正在输入的WMD文本框莫名其妙地将Ctrl+Del解释为“块引用”,而不是“向前删除单词”。我很好奇是否有一个标准列表,列出了网站开发人员可以使用的“浏览器安全”快捷键,而浏览器将承诺在未来版本中避免使用这些快捷键。
window.addEventListener(
而不是$(window).bind(
,则可以使用纯JS完成。 - user1846065