Ctrl + Entrée jQuery dans TEXTAREA


92

Comment déclencher quelque chose lorsque le curseur est dans TEXTAREA et que Ctrl+ Enterest pressé? Utilisation de jQuery . Merci


la réponse que vous avez acceptée ne fonctionne pas. Veuillez modifier votre réponse acceptée
peterchaula

Réponses:


128

Vous pouvez utiliser le event.ctrlKeydrapeau pour voir si la Ctrltouche est enfoncée, quelque chose comme ceci:

$('#textareaId').keydown(function (e) {

  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl-Enter pressed
  }
});

Consultez l'extrait ci-dessus ici .


15
Cela ne fonctionne pas dans Google Chrome. Lorsque Ctrl + Entrée est enfoncée, le code de la touche n'est 10pas 13.
Znarkus

39
Cela ne fonctionne pas. La solution de Yarolslav Yakovlev ci-dessous fonctionne correctement. Veuillez modifier la réponse acceptée pour gagner du temps.
Phil Ricketts

1
@Replete Quel environnement avez-vous testé? Existe-t-il de la documentation sur keyCode 10?
Sanghyun Lee

keyCode 10 ne devrait plus se produire sur Chrome, voir bugs.chromium.org/p/chromium/issues/detail?id=79407
swissspidy

lors du déclenchement de l' keypressévénement, le code clé sera 10, mais keydownou keyupsignalera 13. Uniquement test chrome
iulo

137

En fait, celui-ci fait l'affaire et fonctionne dans tous les navigateurs:

if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey)

lien vers js fiddle .

Remarques:

  • Dans Chrome sur Windows et Linux, enterserait enregistré comme keyCode10, pas 13 ( rapport de bogue ). Nous devons donc vérifier l'un ou l'autre.
  • ctrlKeyest controlsur Windows, Linux et macOS (pas command). Voir aussi metaKey.

Le violon ne fonctionne pas dans Firefox 27, qu'est-ce qui ne va pas?
CodeManX

4
@Yaroslav: Pouvez-vous s'il vous plaît dire à quoi sert "event.keyCode == 10" dans votre réponse.
Shashank.gupta40

3
Si quelqu'un se pose encore des questions sur keyCode 10 et d'autres éléments de chrome, lisez ceci .
user2422869

1
@YaroslavYakovlev ctrlKeycorrespond-il à la touche Commande sur Mac?
Jacob Stamm

2
Pour prendre en charge Mac également:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin

81

Solution universelle

Cela prend également en charge macOS: les Ctrl+ Enteret les ⌘ Command+ Enterseront acceptés.

if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    // do something
}

15
N'ignorez pas cette réponse car elle a un score inférieur, c'est juste une réponse plus récente, c'est en fait mieux.
David Bell

1
Explication de la première partie: Sur macOS, e.ctrlKeydétecte ⌃ Controlet e.metaKeydétecte ⌘ Command. Utilisez cette option si vous souhaitez à la fois Ctrl-Entrée et Commande-Entrée pour déclencher le comportement.
Rory O'Kane

Pouvez - vous expliquer pourquoi vous acceptez un e.keyCodede 10à dire Entrez en plus 13? La documentation MDNkeyCode répertorie uniquement 13comme valeur possible pour Enter, testée sur plusieurs navigateurs et systèmes d'exploitation.
Rory O'Kane

1
@ RoryO'Kane Certaines versions de Chrome sous Windows et Linux utilisent apparemment la valeur 10.
Flimm le

4

J'ai trouvé des réponses incomplètes ou non compatibles avec plusieurs navigateurs.

Ce code fonctionne avec Google Chrome.

$(function ()
{
    $(document).on("keydown", "#textareaId", function(e)
    {
        if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey)
        {
            alert('ctrl+enter');
        }
    });
});

2
Pourriez-vous envisager d'améliorer votre réponse en ajoutant des explications supplémentaires? Merci :) Sinon, ce ne serait qu'une réponse de mauvaise qualité à une question de mauvaise qualité.
Theolodis

@Valamas: Pouvez-vous s'il vous plaît dire quelle est l'utilité de "event.keyCode == 10" dans votre réponse.
Shashank.gupta40

1
I love copy & paster answers
Dr Max Völkel

2

Cela peut être étendu à un plugin JQuery simple mais flexible comme dans:

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

Donc

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

doit soumettre un formulaire lorsque l'utilisateur appuie sur Ctrl-Entrée en mettant l'accent sur la zone de texte de ce formulaire.

(Merci à https://stackoverflow.com/a/9964945/1017546 )


0
$('my_text_area').focus(function{ set_focus_flag });

//ctrl on key down set flag

//enter on key down = check focus flag, check ctrl flag

0

vous devez d'abord définir un indicateur lorsque vous Ctrlappuyez sur, faites-le à la touche. alors vous devez vérifier le keydown de enter. annulez l'indicateur lorsque vous voyez un keyup pour Ctrl.


0

Peut-être un peu tard dans le jeu, mais voici ce que j'utilise. Cela forcera également la soumission du formulaire qui est la cible actuelle du curseur.

$(document.body).keypress(function (e) {
    var $el = $(e.target);
    if (e.ctrlKey && e.keyCode == 10) {
        $el.parents('form').submit();
    } else if (e.ctrlKey && e.keyCode == 13) {
        $el.parents('form').submit();
    }
});

Vous pouvez simplifier le « ifelse if» en un seul if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.