我的用户希望能够点击Ctrl+S来保存表格。有没有一种跨浏览器的好方法来捕获Ctrl+S组合键并提交我的表格?
应用程序基于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;
}
}
});
您可以使用快捷方式库来处理浏览器特定的内容。
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;
});
这个在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;
}
});
老实说,我希望Web应用程序不要覆盖我的默认快捷键。 Ctrl+S已经在浏览器中执行了某些操作。根据我正在查看的网站突然进行更改会造成破坏性的影响,更不用说经常出现的错误。我有网站劫持Ctrl+,Tab因为它看起来与Ctrl+相同I,既破坏了我在网站上的工作,又阻止我像往常一样切换选项卡。
如果需要快捷键,请使用该accesskey
属性。请不要破坏现有的浏览器功能。
$(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.
这是一个上最新版本的@ AlanBellows的答案,替换which
用key
。即使Chrome的大写键出现故障,它也可以使用(如果您按Ctrl+,S则发送大写S而不是s)。在所有现代浏览器中均可使用。
@Eevee:随着浏览器成为越来越丰富的功能的家并开始取代台式机应用程序,它不再是放弃使用键盘快捷键的选择。Gmail丰富而直观的键盘命令集有助于我放弃Outlook。Todoist,Google Reader和Google Calendar中的键盘快捷键每天都使我的生活变得越来越轻松。
开发人员绝对应该注意不要覆盖已经在浏览器中具有含义的按键。例如,我输入的WMD文本框莫名其妙地将Ctrl+解释Del为“ Blockquote”,而不是“向前删除单词”。我很好奇网站开发人员可以使用“浏览器安全”快捷方式的标准列表,并且浏览器将致力于在将来的版本中不使用。
这是我的解决方案,比这里的其他建议更容易阅读,可以轻松包含其他按键组合,并且已经在IE,Chrome和Firefox上进行了测试:
$(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;
});
我喜欢这个小插件。不过,它需要更多的跨浏览器友好性。
这应该可以工作(改编自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;
}
});
例:
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键入时使用的用户(例如,波兰)添加了。如果不按此键,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; });
这个由我自己制作的插件可能会有所帮助。
您可以使用此插件,您必须提供要运行的关键代码和功能,如下所示
simulatorControl([17,83], function(){
console.log('You have pressed Ctrl+Z');
});
在代码中,我显示了如何执行Ctrl+ S。您将在链接上获得详细文档。插件在我在Codepen上的笔的JavaScript代码部分中。
我使用防止默认行为解决了IE上的问题alert("With a message")
:
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;
}
}
});
文章标签:javascript , jquery
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!