首页 / 知识

关于javascript：使用JQuery捕获CTRL + S的最佳跨浏览器方法？

2023-04-17 05:13:00

Best cross-browser method to capture CTRL+S with JQuery?

我的用户希望能够点击Ctrl + S保存表单。有没有一种跨浏览器的好方法来捕获Ctrl + S组合键并提交我的表格？

应用程序基于Drupal构建，因此可以使用jQuery。

这对我有用(使用jquery)重载Ctrl + S，Ctrl + F和Ctrl + G：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(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;
}
}
});

1
2
3
4
5
6

$(window).keypress(function(event) {
if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
alert("Ctrl-S pressed");
event.preventDefault();
return false;
});

各个浏览器的键码可能不同，因此您可能需要检查的字符不止115个。

您可以使用快捷方式库来处理浏览器特定的内容。

1
2
3

shortcut.add("Ctrl+S",function() {
alert("Hi there!");
});

此jQuery解决方案在Ctrl + S和Cmd + S中都适用于Chrome和Firefox。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(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)，不确定为什么(不管大写锁定状态如何)，所以我为了安全起见使用了fromCharCode和toLowerCase

1
2
3
4
5
6
7
8
9
10

$(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 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;
}
});

1
2
3
4
5
6
7
8
9

$(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;
});

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> Try pressing ctrl+s somewhere.

这是@AlanBellows答案的最新版本，将which替换为key。即使Chrome浏览器的大写键出现故障，它也可以使用(如果您按Ctrl + S，它将发送大写S而不是s)。在所有现代浏览器中均可使用。

老实说，我希望Web应用程序不要覆盖我的默认快捷键。 Ctrl + S已经在浏览器中执行了某些操作。根据我正在查看的网站突然进行更改会造成破坏性的影响，更不用说经常出现故障了。我有网站劫持了Ctrl + Tab，因为它看起来与Ctrl + I相同，既破坏了我在网站上的工作，又阻止了我像往常一样切换选项卡。

如果需要快捷键，请使用accesskey属性。请不要破坏现有的浏览器功能。

@Eevee：随着浏览器成为越来越丰富的功能的家并开始取代台式机应用程序，它不再是放弃使用键盘快捷键的选择。 Gmail丰富而直观的键盘命令集有助于我放弃Outlook。 Todoist，Google Reader和Google Calendar中的键盘快捷键每天都使我的生活变得越来越轻松。

开发人员绝对应该注意不要覆盖已经在浏览器中具有含义的按键。例如，我输入的WMD文本框莫名其妙地将Ctrl + Del解释为" Blockquote"，而不是"向前删除单词"。我很好奇网站开发人员可以使用"浏览器安全"快捷方式的标准列表，并且浏览器将致力于在将来的版本中不使用。

这是我的解决方案，比这里的其他建议更容易阅读，可以轻松包含其他按键组合，并且已经在IE，Chrome和Firefox上进行了测试：

1
2
3
4
5
6
7
8
9
10

$(window).keydown(function(evt) {
var key = String.fromCharCode(evt.keyCode);
//ctrl+s
if (key.toLowerCase() ==="s" && evt.ctrlKey) {
fnToRun();
evt.preventDefault(true);
return false;
}
return true;
});

我喜欢这个小插件。但是，它需要更多的跨浏览器友好性。

我使用alert("With a message")防止默认行为解决了IE上的问题：

1
2
3
4
5
6
7
8
9

给Alan Bellows回答：！(e.altKey)添加了用于在键入时使用AltGr的用户(例如，波兰)。如果不按此键，AltGr + S将产生与Ctrl + S相同的结果。

1
2
3
4
5
6
7
8

$(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; });

例：

1
2
3
4
5
6
7
8