TEXTAREA에 Ctrl + Enter jQuery


92

커서가 TEXTAREA 내에 있고 Ctrl+ Enter를 누르면 어떻게 트리거 합니까? jQuery 사용 . 감사


수락 한 답변이 작동하지 않습니다. 당신의 허용 대답을 변경하십시오
peterchaula

답변:


128

다음과 같이 event.ctrlKey플래그를 사용하여 Ctrl키가 눌 렸는지 확인할 수 있습니다 .

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

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

여기 에서 위의 스 니펫을 확인 하십시오 .


15
이것은 Google 크롬에서 작동하지 않습니다. 때 Ctrl 키를 입력하면 키 코드가 누를 때 10,하지 13.
Znarkus

39
작동하지 않습니다. 아래 Yarolslav Yakovlev의 솔루션이 제대로 작동합니다. 사람들의 시간을 절약하기 위해 수락 된 답변을 변경하십시오.
Phil Ricketts

1
@Replete 어떤 환경을 테스트 했습니까? keyCode 10에 대한 문서가 있습니까?
이상현

keyCode 10은 Chrome에서 더 이상 발생하지 않아야합니다. bugs.chromium.org/p/chromium/issues/detail?id=79407
swissspidy

keypress이벤트 를 트리거 할 때 키 코드는 10이지만 13을보고 keydown하거나 keyup보고합니다. 크롬 만 테스트
iulo

137

실제로 이것은 트릭을 수행하고 모든 브라우저에서 작동합니다.

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

js fiddle 링크 .

메모:

  • Windows 및 Linux의 Chrome에서는 13이 아닌 10 enter으로 등록됩니다 keyCode( 버그 보고서 ). 따라서 둘 중 하나를 확인해야합니다.
  • ctrlKey입니다 control윈도우, 리눅스 및 맥 OS (하지에 command). 을 (를) 참조하십시오 metaKey.

바이올린은 Firefox 27에서 작동하지 않습니다. 무엇이 잘못 되었나요?
CodeManX 2014 년

4
@Yaroslav : 대답에서 "event.keyCode == 10"의 용도가 무엇인지 말씀해 주시겠습니까?
Shashank.gupta40 2014 년

3
keyCode 10 및 기타 크롬 항목에 대해 여전히 궁금한 사람이 있다면 이것을 읽으십시오 .
user2422869 2010 년

1
@YaroslavYakovlev는 ctrlKeyMac의 Command 키에 해당합니까?
Jacob Stamm 2015 년

2
Mac도 지원하려면 :if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin 2017-08-03

81

범용 솔루션

이것은 macOS도 지원합니다 : Ctrl+ Enter⌘ Command+ Enter가 모두 허용됩니다.

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

15
이 답변은 점수가 낮기 때문에 무시하지 마십시오. 새로운 답변 일 뿐이며 실제로 더 좋습니다.
David Bell

1
첫 번째 부분의 설명 : 맥 OS,에 e.ctrlKey검출 ⌃ Control하고 e.metaKey검출 ⌘ Command. Ctrl-Enter와 Command-Enter가 모두 동작을 트리거하도록하려면 이것을 사용하십시오.
Rory O'Kane

의 a e.keyCode10Enter를 의미 하는 이유를 설명 할 수 있습니까 13? MDN의 keyCode문서 목록에만 13입력에 대한 가능한 값으로, 여러 브라우저와 운영 시스템에서 테스트했습니다.
Rory O'Kane

1
@ RoryO'Kane Windows 및 Linux의 일부 Chrome 버전은 분명히 값 10을 사용합니다.
Flimm 2019 년

4

다른 사람의 답변이 불완전하거나 브라우저 간 호환되지 않는 것을 발견했습니다.

이 코드는 Google 크롬에서 작동합니다.

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

2
추가 설명을 추가하여 답변을 개선 할 수 있습니까? 감사합니다 :) 그렇지 않으면 이것은 낮은 품질의 질문에 대한 낮은 품질의 대답이 될 것입니다.
Theolodis 2014 년

@Valamas : 대답에서 "event.keyCode == 10"의 용도가 무엇인지 말씀해 주시겠습니까?
Shashank.gupta40 2014 년

1
나는 복사 및 paster 답변을 사랑
박사 최대 Völkel에게

2

다음과 같이 간단하지만 유연한 JQuery 플러그인으로 확장 할 수 있습니다.

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

그러므로

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

사용자가 해당 양식의 텍스트 영역에 초점을두고 Ctrl-Enter를 누르면 양식을 제출해야합니다.

( 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

먼저를 Ctrl누를 때 플래그를 설정 해야합니다. onkeydown을 수행합니다. 그런 다음 Enter 키를 확인해야합니다. 에 대한 키업이 표시되면 플래그를 설정 해제하십시오 Ctrl.


0

게임에 조금 늦었을 수도 있지만 여기에 내가 사용하는 것이 있습니다. 또한 커서의 현재 대상인 양식을 강제로 제출합니다.

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

" ifelse if"을 단일 if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.