keypress, ctrl+c (or some combo like that)

JqueryKeypressKeydownJquery Events

Jquery Problem Overview


I'm trying to create shortcuts on the website I'm making. I know I can do it this way:

if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
	alert('CTRL+S COMBO WAS PRESSED!')
	//run code for CTRL+S -- ie, save!
	e.preventDefault();
}

But the example below is easier and less code, but it's not a combo keypress event:

$(document).keypress("c",function() {
  alert("Just C was pressed..");
});

So I want to know if by using this second example, I could do something like:

$(document).keypress("ctrl+c",function() {
  alert("Ctrl+C was pressed!!");
});

is this possible? I've tried it and it didn't work, what am I doing wrong?

Jquery Solutions


Solution 1 - Jquery

Another approach (no plugin needed) is to just use .ctrlKey property of the event object that gets passed in. It indicates if Ctrl was pressed at the time of the event, like this:

$(document).keypress("c",function(e) {
  if(e.ctrlKey)
    alert("Ctrl+C was pressed!!");
});

Solution 2 - Jquery

I am a little late to the party but here is my part

$(document).on('keydown', function ( e ) {
    // You may replace `c` with whatever key you want
    if ((e.metaKey || e.ctrlKey) && ( String.fromCharCode(e.which).toLowerCase() === 'c') ) {
        console.log( "You pressed CTRL + C" );
    }
});

Solution 3 - Jquery

Try the Jquery Hotkeys plugin instead - it'll do everything you require.

> jQuery Hotkeys is a plug-in that lets > you easily add and remove handlers for > keyboard events anywhere in your code > supporting almost any key combination. > > This plugin is based off of the plugin > by Tzury Bar Yochay: jQuery.hotkeys > > The syntax is as follows:

$(expression).bind(types, keys, handler); $(expression).unbind(types, handler);

$(document).bind('keydown', 'ctrl+a', fn);

// e.g. replace '$' sign with 'EUR'
// $('input.foo').bind('keyup', '$', function(){   
//      this.value = this.value.replace('$', 'EUR'); });

Solution 4 - Jquery

You cannot use Ctrl+C by jQuery , but you can with another library which is http://dl.dropbox.com/u/55765722/delivred/abdennour/lib/js/shortcut.js">shortcut.js</a>

Live Demo : http://jsfiddle.net/abdennour/XvNGc/17/" >Abdennour JSFiddle

$(document).ready(function() {
shortcut.add("Ctrl+C", function() {
    $('span').html("أحسنت. لقد ضغطت على حرفي : Ctrl+C");
        });
    shortcut.add("Ctrl+V", function() {
    $('span').html("أحسنت. لقد ضغطت على حرفي : Ctrl+V");
        });
       shortcut.add("Ctrl+X", function() {
    $('span').html("أحسنت. لقد ضغطت على حرفي : Ctrl+X");
        });

    
});

Solution 5 - Jquery

I couldn't get it to work with .keypress(), but it worked with the .keydown() function like this:

$(document).keydown(function(e) {
    if(e.key == "c" && e.ctrlKey) {
        console.log('ctrl+c was pressed');
    }
});

Solution 6 - Jquery

There is a plugin for Jquery called "Hotkeys" which allows you to bind to key down combinations.

Does this do what you are after?

[Jquery HotKeys - Google Code][1]

[1]: http://code.google.com/p/js-hotkeys/ "Google Code - Jquery HotKeys"

Solution 7 - Jquery

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
	var ctrlMode = false; // if true the ctrl key is down
	///this works
	$(document).keydown(function(e){
	if(e.ctrlKey){
		ctrlMode = true;
	};
	});
	$(document).keyup(function(e){
	ctrlMode = false;
	});
</script>

Solution 8 - Jquery

Simple way to do it in jQuery :

/* The elements we'll bind the shortcut keys to. */
var elements = "body, input, select, checkbox, textarea";

/* Bind the key short-cut 'Ctrl+S' to the save function. */
$(elements).bind ("keydown", "ctrl+space", function (e) {
    // Prevent the default operation.
    e.preventDefault ();
    // Stop processing if we're already doing something.
    console.log ("That's right , you pressed correct shortcut!");
});

Solution 9 - Jquery

In my case, I was looking for a keydown ctrl key and click event. My jquery looks like this:

$('.linkAccess').click( function (event) {
  if(true === event.ctrlKey) {

    /* Extract the value */
    var $link = $('.linkAccess');
    var value = $link.val();

    /* Verified if the link is not null */
    if('' !== value){
      window.open(value);
    }
  }
});

Where "linkAccess" is the class name for some specific fields where I have a link and I want to access it using my combination of key and click.

Solution 10 - Jquery

enter image description here

$(window).keypress("c", function(e) {
  if (!e.ctrlKey)
    return;

  console.info("CTRL +  C detected !");
});

$(window).keypress("c", function(e) {
  if (!e.ctrlKey)
    return;

  $("div").show();
});

/*https://gist.github.com/jeromyanglim/3952143 */

kbd {
  white-space: nowrap;
  color: #000;
  background: #eee;
  border-style: solid;
  border-color: #ccc #aaa #888 #bbb;
  padding: 2px 6px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  background-color: #FAFAFA;
  border-color: #CCCCCC #CCCCCC #FFFFFF;
  border-style: solid solid none;
  border-width: 1px 1px medium;
  color: #444444;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display:none">
  <kbd>CTRL</kbd> + <kbd>C</kbd> detected !
</div>

Solution 11 - Jquery

As of 2019, this works (in Chrome at least)

$(document).keypress(function(e) {
	var key = (event.which || event.keyCode) ;
  if(e.ctrlKey) {
		if (key == 26) { console.log('Ctrl+Z was pressed') ; }
		else if (key == 25) { console.log('Ctrl+Y was pressed') ; }
		else if (key == 19) { console.log('Ctrl+S was pressed') ; }
    else { console.log('Ctrl', key, 'was pressed') ; }
    }
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionandroid.nickView Question on Stackoverflow
Solution 1 - JqueryNick CraverView Answer on Stackoverflow
Solution 2 - JqueryKamran AhmedView Answer on Stackoverflow
Solution 3 - JqueryAndyView Answer on Stackoverflow
Solution 4 - JqueryAbdennour TOUMIView Answer on Stackoverflow
Solution 5 - JqueryChrisView Answer on Stackoverflow
Solution 6 - JquerydiagonalbatmanView Answer on Stackoverflow
Solution 7 - JqueryYakir ManorView Answer on Stackoverflow
Solution 8 - JqueryAniket WareyView Answer on Stackoverflow
Solution 9 - JqueryLOG OracleView Answer on Stackoverflow
Solution 10 - JquerySky VoyagerView Answer on Stackoverflow
Solution 11 - Jqueryden232View Answer on Stackoverflow