Ctrl + Enter jQuery w TEXTAREA


92

Jak wywołać coś, gdy kursor znajduje się wewnątrz TEXTAREA i naciśnięty jest Ctrl+ Enter? Korzystanie z jQuery . Dzięki


odpowiedź, którą zaakceptowałeś, nie działa. Zmień zaakceptowaną odpowiedź
peterchaula

Odpowiedzi:


128

Możesz użyć event.ctrlKeyflagi, aby sprawdzić, czy Ctrlklawisz jest wciśnięty, na przykład:

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

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

Sprawdź powyższy fragment tutaj .


15
To nie działa w Google Chrome. Po naciśnięciu Ctrl + Enter kod klawisza to 10nie 13.
Znarkus

39
To nie działa. Poniższe rozwiązanie Yarolslava Yakovleva działa prawidłowo. Zmień zaakceptowaną odpowiedź, aby zaoszczędzić czas.
Phil Ricketts

1
@Replete Jakie środowisko przetestowałeś? Czy jest jakaś dokumentacja dotycząca keyCode 10?
Sanghyun Lee,

Kod keyCode 10 nie powinien już się zdarzać w Chrome, zobacz bugs.chromium.org/p/chromium/issues/detail?id=79407
swissspidy

podczas keypresszdarzenia wyzwalającego kod keydownkeyup
klucza będzie wynosił

137

Właściwie ten załatwia sprawę i działa we wszystkich przeglądarkach:

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

link do js fiddle .

Uwagi:

  • W Chrome w systemie Windows i Linux enterzostanie zarejestrowany jako keyCode10, a nie 13 ( raport o błędzie ). Więc musimy to sprawdzić.
  • ctrlKeyjest controlw systemie Windows, Linux i macOS (nie command). Zobacz także metaKey.

Skrzypce nie działają w przeglądarce Firefox 27, co się stało?
CodeManX

4
@Yaroslav: Czy możesz powiedzieć, jakie jest zastosowanie „event.keyCode == 10” w Twojej odpowiedzi.
Shashank.gupta40

3
Jeśli ktoś nadal się zastanawia nad keyCode 10 i innymi rzeczami chrome, przeczytaj to .
user2422869

1
@YaroslavYakovlev ctrlKeyodpowiada klawiszowi Command na komputerach Mac?
Jacob Stamm

2
Aby obsługiwać również komputery Mac:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin

81

Uniwersalne rozwiązanie

Obsługuje również macOS: zarówno Ctrl+, jak Enteri ⌘ Command+ Enterbędą akceptowane.

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

15
Nie ignoruj ​​tej odpowiedzi, ponieważ ma niższy wynik, to tylko nowsza odpowiedź, w rzeczywistości jest lepsza.
David Bell

1
Wyjaśnienie pierwszej części: W systemie macOS e.ctrlKeywykrywa ⌃ Controli e.metaKeywykrywa ⌘ Command. Użyj tego, jeśli chcesz, aby Ctrl-Enter i Command-Enter wyzwalały zachowanie.
Rory O'Kane

Czy możesz wyjaśnić, dlaczego oprócz tego akceptujesz również e.keyCodeof 10to znaczy Enter 13? W MDN keyCodedokumentacja listy tylko 13jako możliwej wartości dla wejść, testowane na wielu przeglądarkach i systemach operacyjnych.
Rory O'Kane

1
@ RoryO'Kane Niektóre wersje Chrome w systemach Windows i Linux używają najwyraźniej wartości 10.
Flimm

4

Znalazłem odpowiedzi innych osób albo niekompletne, albo niezgodne z różnymi przeglądarkami.

Ten kod działa w Google Chrome.

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

2
Czy mógłbyś rozważyć ulepszenie swojej odpowiedzi poprzez dodanie dalszych wyjaśnień? Dzięki :) W przeciwnym razie byłaby to słaba odpowiedź na pytanie niskiej jakości.
Theolodis

@Valamas: Czy możesz powiedzieć, jakie jest zastosowanie „event.keyCode == 10” w Twojej odpowiedzi.
Shashank.gupta40

1
Uwielbiam kopiuj i paster odpowiedzi
Dr. Max Völkel,

2

Można to rozszerzyć na prostą, ale elastyczną wtyczkę JQuery, jak w:

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

A zatem

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

powinien przesłać formularz, gdy użytkownik naciśnie ctrl-enter, skupiając się na obszarze tekstowym tego formularza.

(Dzięki 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

najpierw musisz ustawić flagę, kiedy Ctrljest wciśnięty, zrób to onkeydown. następnie musisz sprawdzić klawisz wejścia enter. odznacz flagę, gdy zobaczysz klucz dla Ctrl.


0

Może trochę za późno do gry, ale oto czego używam. Wymusi również przesłanie formularza, który jest bieżącym celem kursora.

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

Możesz uprościć „ ifelse if” do jednego if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.