Apakah ada peristiwa di Jquery yang dipicu hanya jika pengguna menekan tombol enter di kotak teks? Atau plugin apa pun yang dapat ditambahkan untuk menyertakan ini? Jika tidak, bagaimana cara saya menulis plugin cepat yang akan melakukan ini?
Apakah ada peristiwa di Jquery yang dipicu hanya jika pengguna menekan tombol enter di kotak teks? Atau plugin apa pun yang dapat ditambahkan untuk menyertakan ini? Jika tidak, bagaimana cara saya menulis plugin cepat yang akan melakukan ini?
Jawaban:
Anda dapat memasang acara kustom Anda sendiri
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodeuntuk beberapa tombol, lebih baik digunakan e.which, ini akan menjamin bahwa Anda akan menangani tombol yang sama pada setiap browser
$('#textbox').on('keypress', function (e) {
if(e.which === 13){
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
}
});Ini adalah plugin untuk Anda: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
//use it:
$('textarea').pressEnter(function(){alert('here')})$variabel untuk plugin itu bukan ide yang baik karena dapat menyebabkan konflik.
$("#myInput").bind('click, onEnter', myCallback);dan itu akan bekerja tanpa memerlukan yang lain?
inilah plugin jquery untuk melakukan itu
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);untuk menggunakannya, masukkan kode dan atur seperti ini:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), dengan cara itu di dalam fungsi callback Anda dapat menggunakan thisseperti biasa untuk mengakses elemen di mana peristiwa itu dipicu.
e.preventDefault(); e.stopPropagation();di dalam if (e.keyCode)bit.
Harus dicatat bahwa penggunaan live()dalam jQuery telah ditinggalkan sejak versi 1.7dan telah dihapus dalam jQuery 1.9. Sebagai gantinya, penggunaan on()disarankan.
Saya akan sangat menyarankan metodologi berikut untuk mengikat, karena memecahkan tantangan potensial berikut:
document.bodydan melewati $ selector sebagai argumen kedua on(), elemen dapat dilampirkan, dilepaskan, ditambahkan atau dihapus dari DOM tanpa perlu berurusan dengan peristiwa mengikat kembali atau mengikat ganda. Ini karena acara dilampirkan document.bodydaripada $selectorlangsung, yang berarti $selectordapat ditambahkan, dihapus dan ditambahkan lagi dan tidak akan pernah memuat acara yang terikat padanya.off()sebelumnya on(), skrip ini dapat hidup di dalam bagian utama halaman, atau di dalam tubuh panggilan AJAX, tanpa harus khawatir tentang peristiwa yang tidak sengaja mengikat ganda.$(function() {...}), skrip ini dapat kembali dimuat oleh badan utama laman, atau di dalam badan panggilan AJAX. $(document).ready()tidak dipecat karena permintaan AJAX, sementara $(function() {...})demikian.Berikut ini sebuah contoh:
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event) {
if(event.keyCode == 13) { // 13 = Enter Key
alert('enter key pressed.');
}
});
});
</script>
</head>
<body>
</body>
</html>Jika input searchAnda, Anda juga dapat menggunakan on 'search'acara. Contoh
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});Kode HTML: -
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Kode Java Script
function AddKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('btnEmail').click();
return false;
}
return true;
}Formulir Anda tidak memiliki Tombol Kirim Default
Variasi halus lainnya. Saya melakukan sedikit pemisahan kekuatan, jadi saya memiliki plugin untuk mengaktifkan menangkap tombol enter, lalu saya hanya mengikat acara secara normal:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);Dan kemudian digunakan:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Variasi ini memungkinkan Anda menggunakan delegasi acara (untuk mengikat elemen yang belum Anda buat).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Saya tidak keypressdapat mengaktifkan acara untuk tombol enter, dan menggaruk kepala saya selama beberapa waktu, sampai saya membaca dokumen jQuery:
" Acara penekanan tombol dikirim ke elemen ketika browser mendaftar input keyboard. Ini mirip dengan acara keydown, kecuali bahwa pengubah dan kunci non-pencetakan seperti Shift, Esc, dan menghapus peristiwa pemicu keydown tetapi bukan peristiwa penekanan tombol. " ( https://api.jquery.com/keypress/ )
Saya harus menggunakan acara keyupatau keydownuntuk menangkap penekanan tombol enter.