Ctrl + Masukkan jQuery di TEXTAREA


92

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


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 .


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.

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
}

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');
        }
    });
});

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 )


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

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.


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

Anda bisa menyederhanakan " if... else if" menjadi satu if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)).
Rory O'Kane
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.