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 « if… else 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.