Ctrl + Enter jQuery en TEXTAREA


92

¿Cómo puedo activar algo cuando el cursor está dentro de TEXTAREA y se presiona Ctrl+ Enter? Usando jQuery . Gracias


la respuesta que aceptó no funciona. Cambie su respuesta aceptada
peterchaula

Respuestas:


128

Puede usar la event.ctrlKeybandera para ver si la Ctrltecla está presionada, algo como esto:

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

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

Consulte el fragmento anterior aquí .


15
Esto no funciona en Google Chrome. Cuando se presiona Ctrl + Enter, el código de la tecla es 10, no 13.
Znarkus

39
Esto no funciona. La siguiente solución de Yarolslav Yakovlev funciona correctamente. Cambie la respuesta aceptada para ahorrar tiempo a las personas.
Phil Ricketts

1
@Replete ¿Qué entorno ha probado? ¿Existe alguna documentación sobre keyCode 10?
Sanghyun Lee

keyCode 10 ya no debería suceder en Chrome, consulte bugs.chromium.org/p/chromium/issues/detail?id=79407
swissspidy

cuando se active el keypressevento, el código clave será 10, pero keydowno keyupinformará 13. Solo prueba Chrome
iulo

137

En realidad, este hace el truco y funciona en todos los navegadores:

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

enlace a js fiddle .

Notas:

  • En Chrome en Windows y Linux, enterse registraría como keyCode10, no 13 ( informe de error ). Así que tenemos que comprobar cualquiera de los dos.
  • ctrlKeyestá controlen Windows, Linux y macOS (no command). Vea también metaKey.

El violín no funciona en Firefox 27, ¿qué pasa?
CodeManX

4
@Yaroslav: ¿Podría decirnos cuál es el uso de "event.keyCode == 10" en su respuesta?
Shashank.gupta40

3
Si alguien todavía se pregunta sobre keyCode 10 y otras cosas de Chrome, lea esto .
user2422869

1
@YaroslavYakovlev ¿ ctrlKeycorresponde a la tecla Comando en Mac?
Jacob Stamm

2
Para ser compatible con Mac también:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin

81

Solución universal

Esto también es compatible con macOS: se aceptarán tanto Ctrl+ Entercomo ⌘ Command+ Enter.

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

15
No ignore esta respuesta porque tiene una puntuación más baja, es solo una respuesta más nueva, en realidad es mejor.
David Bell

1
Explicación de la primera parte: En macOS, e.ctrlKeydetecta ⌃ Controly e.metaKeydetecta ⌘ Command. Use esto si desea que tanto Ctrl-Enter como Command-Enter activen el comportamiento.
Rory O'Kane

¿Puede explicar por qué acepta que una e.keyCodede 10significa Ingresar además de 13? La documentación de MDNkeyCode enumera solo 13como un valor posible para Enter, probado en múltiples navegadores y sistemas operativos.
Rory O'Kane

1
@ RoryO'Kane Algunas versiones de Chrome en Windows y Linux usan el valor 10, aparentemente.
Flimm

4

Encontré respuestas de otros incompletas o no compatibles con varios navegadores.

Este código funciona en google chrome.

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

2
¿Podría considerar mejorar su respuesta agregando más explicaciones? Gracias :) De lo contrario, sería una respuesta de baja calidad a una pregunta de baja calidad.
Theolodis

@Valamas: ¿Puede decirnos cuál es el uso de "event.keyCode == 10" en su respuesta?
Shashank.gupta40

1
Me encanta copiar y pegar respuestas
Dr. Max Völkel

2

Esto se puede extender a un complemento JQuery simple pero flexible como en:

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

Así

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

debe enviar un formulario cuando el usuario presiona ctrl-enter con el foco en el área de texto de ese formulario.

(Gracias 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

primero tienes que establecer una bandera cuando Ctrlse presiona, haz esto en la tecla entonces tienes que comprobar la tecla de entrar. desarme la bandera cuando vea una tecla para Ctrl.


0

Quizás un poco tarde para el juego, pero esto es lo que uso. También forzará el envío del formulario que es el objetivo actual del 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();
    }
});

Podría simplificar el " if... else if" a un solo if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.