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

HP.
la source
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 .

Christian C. Salvadó
la source
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.
Yaroslav Yakovlev
la source
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
}
Serhii Matrunchyk
la source
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');
        }
    });
});
Valamas
la source
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 )

Joeln
la source
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
idrumgood
la source
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.

mkoryak
la source
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();
    }
});
Barry Chapman
la source
Vous pouvez simplifier le « ifelse if» en un seul if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane