How do I capture a CTRL-S without jQuery or any other library?

前端未结

关注

 7  476

别那么骄傲

How do I go about capturing the CTRL + S event in a webpage?

I do not wish to use jQuery or any other special library.

Thanks for your

相关标签:

7条回答

不知归路

2020-12-09 05:03
```
document.onkeydown = function(e) {
    if (e.ctrlKey && e.keyCode === 83) {
        alert('strg+s');
    }
    return false;
};
```
Some events can't be captured, since they are capture by the system or application.
0 讨论(0)
发布评论:

提交评论
- 加载中...

情话喂你

2020-12-09 05:04

Oops you wanted simultaneous, changed code to reflect your scenario

function iskeyPress(e) {
          e.preventDefault();
            if (e.ctrlKey&&e.keyCode == 83) {
               alert("Combination pressed");

               }
              return false;//To prevent default behaviour         
              }

Add this to body

  <body onkeyup="iskeypress()">

0 讨论(0)

无人共我

2020-12-09 05:17

document.onkeydown = function(e) {
    if (e.ctrlKey && e.keyCode === 83) {
        alert('hello there');

        // your code here
        return false;
    }
};

You need to replace document with your actual input field.

DEMO

0 讨论(0)

青春惊慌失措

2020-12-09 05:18
An up to date answer in 2020.

Since the Keyboard event object has been changed lately, and many of its old properties are now deprecated, here's a modernized code:
```
document.addEventListener('keydown', e => {
  if (e.ctrlKey && e.key === 's') {
    // Prevent the Save dialog to open
    e.preventDefault();
    // Place your code here
    console.log('CTRL + S');
  }
});
```
Notice the new key property, which contains the information about the stroked key. Additionally, some browsers might not allow code to override the system shortcuts.
0 讨论(0)
发布评论:

提交评论
- 加载中...

走了就别回头了

2020-12-09 05:18

Mousetrap is a great library to do this (8,000+ stars on Github).

Documentation: https://craig.is/killing/mice

// map multiple combinations to the same callback
Mousetrap.bind(['command+s', 'ctrl+s'], function() {
    console.log('command s or control s');

    // return false to prevent default browser behavior
    // and stop event from bubbling
    return false;
});

0 讨论(0)

栀梦

2020-12-09 05:19
If you're just using native / vanilla JavaScript, this should achieve the results you are after:
```
var isCtrl = false;
document.onkeyup=function(e){
    if(e.keyCode == 17) isCtrl=false;
}

document.onkeydown=function(e){
    if(e.keyCode == 17) isCtrl=true;
    if(e.keyCode == 83 && isCtrl == true) {
        //run code for CTRL+S -- ie, save!
        return false;
    }
}
```
What's happening?

The onkeydown method checks to see if it is the CTRL key being pressed (key code 17). If so, we set the isCtrl value to true to mark it as being activated and in use. We can revert this value back to false within the onkeyup function.

We then look to see if any other keys are being pressed in conjunction with the ctrl key. In this example, key code 83 is for the S key. You can add your custom processing / data manipulation / save methods within this function, and we return false to try to stop the browser from acting on the CTRL-S key presses itself.
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页