Cara menggunakan JQuery untuk melaksanakan Ctrl Enter untuk menyerahkan form_jquery

Kadangkala kami menggunakan kombinasi kekunci papan kekunci dan bukannya menggunakan tetikus untuk menyelamatkan masalah Hari ini kami menggunakan JQuery untuk melaksanakan Ctrl Enter untuk menyerahkan borang.

Apabila kami menyiarkan, selepas memasukkan kandungan dalam kotak input kandungan, anda boleh mengklik butang "Serah" untuk menerbitkan kandungan. Walau bagaimanapun, jika anda cukup "malas", anda boleh menyerahkan borang dan menyelesaikan penerbitan kandungan dengan menahan kekunci Ctrl Enter pada papan kekunci tanpa menggerakkan tetikus.
Sudah tentu, kerana kotak input ialah kawasan teks kotak input teks berbilang baris, kami tahu bahawa menekan kekunci Enter dalam kawasan teks boleh menukar baris dan tidak boleh menghantar borang secara terus (serahkan secara lalai, penyemak imbas mengabaikan kekunci Ctrl). . Kemudian kita boleh menggunakan skrip Javascript untuk mengawal penggunaan kombinasi kekunci Ctrl Enter untuk melengkapkan penyerahan borang Artikel ini menggunakan contoh untuk menerangkan kesan penyerahan borang Ctrl Enter berdasarkan jQuery.
HTML
Dalam isi halaman, kami meletakkan kotak input textarea, butang hantar dan div#result yang memaparkan hasil yang diserahkan.

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 

CSS
Cuma tulis beberapa baris css untuk mengubah suai kotak input textarea, butang hantar butang dan gaya .post untuk memaparkan kandungan selepas penyerahan.

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;} 

jQuery
Mula-mula perpustakaan jQuery mesti dimuatkan terlebih dahulu.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

Mari kita tulis pemalam ctrlEnter(), yang mengambil dua parameter Parameter btns yang pertama mewakili elemen yang pemalam bertindak dan parameter kedua. Setiap parameter fn mewakili fungsi yang dipanggil. Kami menambah fungsi performAction() pada pemalam untuk memastikan ia dipanggil secara dalaman. Kemudian pemalam mula mendengar acara papan kekunci Apabila kekunci dalam papan kekunci kekunci ditekan, ia menentukan sama ada kekunci Enter dan kekunci Ctrl ditekan, dan kemudian memanggil performAction() dan menghalang pengembalian pengangkutan lalai dan suapan talian. tingkah laku. Kemudian kita juga harus mengikat acara klik pada butang dan memanggil performAction(), supaya kandungan boleh diserahkan dengan mengklik butang.

$.fn.ctrlEnter = function (btns, fn) { 
   var thiz = $(this); 
   btns = $(btns); 
     
   function performAction (e) { 
     fn.call(thiz, e); 
   }; 
   thiz.bind("keydown", function (e) { 
    if (e.keyCode === 13 && e.ctrlKey) { 
      performAction(e); 
      e.preventDefault(); //阻止默认回车换行 
    } 
   }); 
   btns.bind("click", performAction); 
} 

Akhir sekali, panggil ctrlEnter untuk menyerahkan kandungan dalam textarea untuk #result, gantikan carriage return dengan br, dan kosongkan textarea. Sudah tentu, dalam aplikasi sebenar, kandungan harus disiarkan ke program pemprosesan latar belakang, dan program latar belakang PHP dan proses lain harus mengendalikan kandungan dan interaksi data.

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
}); 

Di atas ialah cara menggunakan JQuery untuk melaksanakan Ctrl Enter untuk menghantar borang Adakah anda mempunyai idea yang jelas, saya harap artikel ini akan membantu kajian anda.