Ctrl + Nhập jQuery trong TEXTAREA


92

Làm cách nào để kích hoạt một cái gì đó khi con trỏ ở trong TEXTAREACtrl+ Enterđược nhấn? Sử dụng jQuery . Cảm ơn


câu trả lời bạn đã chấp nhận không hoạt động. Vui lòng thay đổi câu trả lời chấp nhận của bạn
peterchaula

Câu trả lời:


128

Bạn có thể sử dụng event.ctrlKeycờ để xem liệu Ctrlphím có được nhấn hay không, giống như sau:

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

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

Kiểm tra đoạn mã trên tại đây .


15
Điều này không hoạt động trong Google Chrome. Khi nhấn Ctrl + Enter, mã phím 10không được 13.
Znarkus

39
Điều này không hoạt động. Giải pháp của Yarolslav Yakovlev dưới đây hoạt động bình thường. Vui lòng thay đổi câu trả lời được chấp nhận để tiết kiệm thời gian cho mọi người.
Phil Ricketts

1
@Replete Bạn đã thử nghiệm môi trường nào? Có tài liệu nào về keyCode 10 không?
Sanghyun Lee

keyCode 10 sẽ không còn xảy ra trên Chrome nữa, hãy xem bug.chromium.org/p/chromium/issues/detail?id=79407
swissspidy

khi kích hoạt keypresssự kiện, mã phím sẽ là 10, nhưng keydownhoặc keyupsẽ báo cáo 13. Chỉ chrome thử nghiệm
iulo

137

Trên thực tế, cái này thực hiện thủ thuật và hoạt động trên tất cả các trình duyệt:

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

liên kết đến js fiddle .

Ghi chú:

  • Trong Chrome trên Windows và Linux, entersẽ được đăng ký là keyCode10, không phải 13 ( báo cáo lỗi ). Vì vậy, chúng ta cần phải kiểm tra một trong hai.
  • ctrlKeycontroltrên Windows, Linux và macOS (không command). Xem thêm metaKey.

Fiddle không hoạt động trong Firefox 27, có chuyện gì vậy?
CodeManX

4
@Yaroslav: Bạn có thể vui lòng cho biết công dụng của "event.keyCode == 10" trong câu trả lời của bạn là gì không.
Shashank.gupta40

3
Nếu ai đó vẫn còn thắc mắc về keyCode 10 và các công cụ chrome khác, hãy đọc phần này .
user2422869

1
@YaroslavYakovlev có ctrlKeytương ứng với phím Command trên máy Mac không?
Jacob Stamm

2
Để hỗ trợ Mac quá:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin

81

Giải pháp phổ quát

Điều này cũng hỗ trợ macOS: cả Ctrl+ Enter⌘ Command+ Entersẽ được chấp nhận.

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

15
Đừng bỏ qua câu trả lời này vì nó có điểm thấp hơn, nó chỉ là một câu trả lời mới hơn, nó thực sự tốt hơn.
David Bell,

1
Giải thích phần đầu tiên: Trên macOS, e.ctrlKeyphát hiện ⌃ Controle.metaKeyphát hiện ⌘ Command. Sử dụng điều này nếu bạn muốn cả Ctrl-Enter và Command-Enter để kích hoạt hành vi.
Rory O'Kane

Bạn có thể giải thích tại sao bạn chấp nhận một e.keyCodesố 10nghĩa Nhập ngoài 13? Các MDN keyCodetài liệu liệt kê chỉ 13là một giá trị có thể cho Enter, thử nghiệm trên nhiều trình duyệt và hệ điều hành.
Rory O'Kane

1
@ RoryO'Kane Một số phiên bản Chrome trên Windows và Linux dường như sử dụng giá trị 10.
Flimm

4

Tôi tìm thấy câu trả lời của những người khác hoặc không đầy đủ hoặc không tương thích với nhiều trình duyệt.

Mã này hoạt động google chrome.

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

2
Bạn có thể xem xét cải thiện câu trả lời của mình bằng cách thêm các giải thích khác không? Cảm ơn :) Nếu không đây sẽ chỉ là một câu trả lời chất lượng thấp cho một câu hỏi chất lượng thấp.
Theolodis

@Valamas: Bạn có thể vui lòng cho biết công dụng của "event.keyCode == 10" trong câu trả lời của bạn là gì không.
Shashank.gupta40

1
Tôi thích câu trả lời sao chép & paster
Tiến sĩ Max Völkel

2

Điều này có thể được mở rộng thành một plugin JQuery đơn giản nhưng linh hoạt như trong:

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

Như vậy

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

nên gửi biểu mẫu khi người dùng nhấn ctrl-enter với tiêu điểm là vùng văn bản của biểu mẫu đó.

(Cảm ơn 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

đầu tiên bạn phải đặt cờ khi Ctrlđược nhấn, hãy thực hiện thao tác này trên phím tắt. thì bạn phải kiểm tra keydown của enter. bỏ đặt cờ khi bạn nhìn thấy một keyup cho Ctrl.


0

Có lẽ hơi muộn với trò chơi, nhưng đây là những gì tôi sử dụng. Nó cũng sẽ buộc gửi biểu mẫu là mục tiêu hiện tại của con trỏ.

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

Bạn có thể đơn giản hóa “ ifelse if” thành một if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.