web-dev-qa-db-fra.com

jquery: pression du clavier, ctrl + c (ou une combo comme ça)

J'essaie de créer des raccourcis sur le site Web que je crée. Je sais que je peux le faire de cette façon:

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

Mais l'exemple ci-dessous est plus facile et moins codé, mais ce n'est pas un événement de frappe à la fois:

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

Je veux donc savoir si, en utilisant ce deuxième exemple, je pourrais faire quelque chose comme:

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

est-ce possible? J'ai essayé et ça n'a pas marché, qu'est-ce que je fais mal?.

jqueryjavascript-eventskeypresskeydown
48
android.nick

Une autre approche (aucun plugin nécessaire) consiste à utiliser simplement .ctrlKey propriété de objet event qui est transmis. Il indique si Ctrl était pressé au moment de l'événement, comme ceci:

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

Je suis un peu tard pour la fête mais voici ma 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" );
    }
});
37
Kamran Ahmed

Essayez le Jquery Hotkeys plugin - il fera tout ce dont vous avez besoin.

jQuery Hotkeys est un plug-in qui permet à vous ajoutez et supprimez facilement des gestionnaires pour événements clavier n'importe où dans votre code soutenant presque n'importe quelle combinaison de touches.

Ce plugin est basé sur le plugin par Tzury Bar Yochay: jQuery.hotkeys

La syntaxe est la suivante:

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

Vous ne pouvez pas utiliser Ctrl+C par jQuery, mais vous pouvez avec une autre bibliothèque qui est shortcut.js

Démo en direct: 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");
        });


});
5
Abdennour TOUMI

Je ne pouvais pas le faire fonctionner avec .keypress (), mais cela fonctionnait avec la fonction .keydown () comme suit

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

Il existe un plugin pour Jquery appelé "Hotkeys" qui vous permet de vous lier aux combinaisons de touches.

Est-ce que cela fait ce que vous recherchez?

Jquery HotKeys - Google Code

1
diagonalbatman
<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>
1
Yakir Manor

 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>

0
A-312

Dans mon cas, je cherchais une touche de raccourci clavier et un clic sur l'événement . Mon jquery ressemble à ceci: 

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

Où "linkAccess" est le nom de la classe pour certains champs spécifiques dans lesquels j'ai un lien et que je veux y accéder en utilisant ma combinaison de touche et de clic.

0
LOG Oracle