Ctrl + Enter jQuery em TEXTAREA


92

Como faço para acionar algo quando o cursor está dentro de TEXTAREA e Ctrl+ Enteré pressionado? Usando jQuery . obrigado


a resposta que você aceitou não funciona. Por favor, altere sua resposta aceita
peterchaula

Respostas:


127

Você pode usar o event.ctrlKeysinalizador para ver se a Ctrltecla está pressionada, algo assim:

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

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

Verifique o snippet acima aqui .


15
Isso não funciona no Google Chrome. Quando Ctrl + Enter é pressionado, o código da tecla é 10, não 13.
Znarkus

39
Isso não funciona. A solução de Yarolslav Yakovlev abaixo funciona corretamente. Por favor, altere a resposta aceita para economizar tempo das pessoas.
Phil Ricketts

1
@Replete Qual ambiente você testou? Existe alguma documentação sobre o keyCode 10?
Sanghyun Lee

keyCode 10 não deve acontecer mais no Chrome, consulte bugs.chromium.org/p/chromium/issues/detail?id=79407
swissspidy

quando disparar o keypressevento, o código-chave será 10, mas keydownou keyupreportará 13. Apenas teste cromo
iulo

137

Na verdade, este faz o truque e funciona em todos os navegadores:

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

Link para js fiddle .

Notas:

  • No Chrome no Windows e Linux, enterseria registrado como keyCode10, não 13 ( relatório de bug ). Portanto, precisamos verificar qualquer um.
  • ctrlKeyestá controlno Windows, Linux e macOS (não command). Veja também metaKey.

O violino não funciona no Firefox 27, o que há de errado?
CodeManX

4
@Yaroslav: Você pode dizer qual é o uso de "event.keyCode == 10" em sua resposta.
Shashank.gupta40

3
Se alguém ainda está se perguntando sobre o keyCode 10 e outras coisas do Chrome, leia isto .
user2422869

1
@YaroslavYakovlev ctrlKeycorresponde à tecla Command em Macs?
Jacob Stamm

2
Para oferecer suporte a Mac também:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin

80

Solução universal

Isso também oferece suporte ao macOS: Ctrl+ Entere ⌘ Command+ Enterserão aceitos.

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

15
Não ignore essa resposta porque ela tem uma pontuação mais baixa, é apenas uma resposta mais recente, na verdade é melhor.
David Bell

1
Explicação da primeira parte: No macOS, e.ctrlKeydetecta ⌃ Controle e.metaKeydetecta ⌘ Command. Use-o se quiser que Ctrl-Enter e Command-Enter acionem o comportamento.
Rory O'Kane

Você pode explicar por que aceita e.keyCodede 10para significar Enter além de 13? A documentação MDNkeyCode lista apenas 13como um valor possível para Enter, testado em vários navegadores e sistemas operacionais.
Rory O'Kane

1
@RoryO'Kane Algumas versões do Chrome no Windows e Linux usam o valor 10, aparentemente.
Flimm de

4

Eu encontrei respostas de outras pessoas incompletas ou incompatíveis entre navegadores.

Este código funciona no Google Chrome.

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

2
Você poderia melhorar sua resposta adicionando mais explicações? Obrigado :) Caso contrário, esta seria apenas uma resposta de baixa qualidade a uma pergunta de baixa qualidade.
Theolodis

@Valamas: Você pode dizer qual é a utilidade de "event.keyCode == 10" em sua resposta.
Shashank.gupta40

1
Eu amo respostas de cópia e paster
Dr. Max Völkel

2

Isso pode ser estendido para um plug-in JQuery simples, mas flexível, como em:

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

portanto

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

deve enviar um formulário quando o usuário pressiona ctrl-enter com foco na área de texto desse formulário.

(Com agradecimentos a 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

primeiro você tem que definir um sinalizador quando Ctrlé pressionado, faça isso onkeydown. então você tem que verificar a tecla de enter. desmarque a bandeira quando vir uma chave para Ctrl.


0

Talvez um pouco tarde para o jogo, mas aqui está o que eu uso. Também forçará o envio do formulário que é o destino atual do cursor.

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

Você poderia simplificar o “ ifelse if” para um único if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.