Ctrl + Masukkan jQuery di TEXTAREA

92

Bagaimana cara memicu sesuatu saat kursor berada dalam TEXTAREA dan Ctrl+ Enterditekan? Menggunakan jQuery . Terima kasih

HP.
sumber
jawaban yang Anda terima tidak berhasil. Harap ubah jawaban Anda yang diterima
peterchaula

Jawaban:

128

Anda dapat menggunakan event.ctrlKeybendera untuk melihat apakah Ctrltombolnya ditekan, seperti ini:

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

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

Periksa cuplikan di atas di sini .

Christian C. Salvadó
sumber
15
Ini tidak bekerja di Google Chrome. Ketika Ctrl + Enter ditekan, kode kuncinya adalah 10, bukan 13.
Znarkus
39
Ini tidak bekerja. Solusi Yarolslav Yakovlev di bawah ini berfungsi dengan baik. Harap ubah jawaban yang diterima untuk menghemat waktu orang.
Phil Ricketts
1
@Replete Lingkungan mana yang telah Anda uji? Apakah ada dokumentasi tentang keyCode 10?
Sanghyun Lee
keyCode 10 seharusnya tidak terjadi lagi di Chrome, lihat bugs.chromium.org/p/chromium/issues/detail?id=79407
swissspidy
saat memicu keypressperistiwa, kode kunci akan menjadi 10, tetapi keydownatau keyupakan melaporkan 13. Hanya uji chrome
iulo
137

Sebenarnya yang ini melakukan trik dan berfungsi di semua browser:

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

link ke js fiddle .

Catatan:

  • Di Chrome di Windows dan Linux, enterakan terdaftar sebagai keyCode10, bukan 13 ( laporan bug ). Jadi kita perlu memeriksa keduanya.
  • ctrlKeyada controldi Windows, Linux, dan macOS (bukan command). Lihat juga metaKey.
Yaroslav Yakovlev
sumber
Biola tidak berfungsi di Firefox 27, apa yang salah?
CodeManX
4
@Yaroslav: Bisakah Anda jelaskan apa gunanya "event.keyCode == 10" dalam jawaban Anda.
Shashank.gupta40
3
Jika ada yang masih bertanya-tanya tentang keyCode 10 dan hal-hal chrome lainnya, baca ini .
pengguna2422869
1
@YaroslavYakovlev tidak ctrlKeysesuai dengan tombol Command di Mac?
Jacob Stamm
2
Untuk mendukung Mac juga:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin
81

Solusi universal

Ini juga mendukung macOS: Ctrl+ Enterdan ⌘ Command+ Enterakan diterima.

if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    // do something
}
Serhii Matrunchyk
sumber
15
Jangan abaikan jawaban ini karena mendapat skor lebih rendah, ini hanya jawaban baru, sebenarnya lebih baik.
David Bell
1
Penjelasan bagian pertama: Di macOS, e.ctrlKeymendeteksi ⌃ Controldan e.metaKeymendeteksi ⌘ Command. Gunakan ini jika Anda ingin Ctrl-Enter dan Command-Enter memicu perilaku.
Rory O'Kane
Dapatkah Anda menjelaskan mengapa Anda menerima e.keyCodedari 10to berarti Enter dan 13? The MDN keyCodedokumentasi daftar hanya 13sebagai nilai yang mungkin untuk Masukkan, diuji di beberapa browser dan sistem operasi.
Rory O'Kane
1
@ RoryO'Kane Beberapa versi Chrome di Windows dan Linux menggunakan nilai 10, rupanya.
Flimm
4

Saya menemukan jawaban orang lain tidak lengkap atau tidak kompatibel lintas-browser.

Kode ini berfungsi google chrome.

$(function ()
{
    $(document).on("keydown", "#textareaId", function(e)
    {
        if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey)
        {
            alert('ctrl+enter');
        }
    });
});
Valamas
sumber
2
Bisakah Anda mempertimbangkan untuk meningkatkan jawaban Anda dengan menambahkan penjelasan lebih lanjut? Terima kasih :) Jika tidak, ini hanya akan menjadi jawaban berkualitas rendah untuk pertanyaan berkualitas rendah.
Theolodis
@Valamas: Bisakah Anda jelaskan apa gunanya "event.keyCode == 10" dalam jawaban Anda.
Shashank.gupta40
1
Saya suka jawaban copy & paster
Dr. Max Völkel
2

Ini dapat diperluas ke plugin JQuery yang sederhana namun fleksibel seperti di:

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

Jadi

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

harus mengirimkan formulir ketika pengguna menekan ctrl-enter dengan fokus pada area teks formulir itu.

(Dengan terima kasih kepada https://stackoverflow.com/a/9964945/1017546 )

joeln
sumber
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
idrumgood
sumber
0

pertama Anda harus mengatur bendera saat Ctrlditekan, lakukan ini saat tombol turun. maka Anda harus memeriksa keydown dari enter. hapus tanda ketika Anda melihat keyup untuk Ctrl.

mkoryak
sumber
0

Mungkin agak terlambat ke permainan, tapi inilah yang saya gunakan. Ini juga akan memaksa pengiriman formulir yang merupakan target kursor saat ini.

$(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();
    }
});
Barry Chapman
sumber
Anda bisa menyederhanakan " if... else if" menjadi satu if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane