มีเหตุการณ์ใน Jquery ที่ถูกเรียกใช้เฉพาะเมื่อผู้ใช้กดปุ่ม Enter ในกล่องข้อความหรือไม่? หรือปลั๊กอินใด ๆ ที่สามารถเพิ่มเพื่อรวมสิ่งนี้ได้? ถ้าไม่ฉันจะเขียนปลั๊กอินด่วนที่จะทำอย่างไร
มีเหตุการณ์ใน Jquery ที่ถูกเรียกใช้เฉพาะเมื่อผู้ใช้กดปุ่ม Enter ในกล่องข้อความหรือไม่? หรือปลั๊กอินใด ๆ ที่สามารถเพิ่มเพื่อรวมสิ่งนี้ได้? ถ้าไม่ฉันจะเขียนปลั๊กอินด่วนที่จะทำอย่างไร
คำตอบ:
คุณสามารถต่อเหตุการณ์ที่กำหนดเองของคุณได้
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodeมีคีย์ที่แตกต่างกันดีกว่าใช้e.whichนี่จะรับประกันได้ว่าคุณจะจัดการกับปุ่มเดียวกันในทุกเบราว์เซอร์
$('#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");
}
});นี่คือปลั๊กอินสำหรับคุณ: (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')})$ตัวแปรสำหรับปลั๊กอินไม่ใช่ความคิดที่ดีเพราะอาจทำให้เกิดข้อขัดแย้งได้
$("#myInput").bind('click, onEnter', myCallback);และมันจะทำงานโดยไม่จำเป็นต้องมีอะไรอีกหรือไม่
เป็นปลั๊กอิน jquery เพื่อทำเช่นนั้น
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);ในการใช้งานให้ใส่รหัสและตั้งค่าดังนี้:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this)วิธีการภายในฟังก์ชั่นการโทรกลับที่คุณสามารถใช้thisตามปกติเพื่อเข้าถึงองค์ประกอบที่เหตุการณ์ถูกเรียก
e.preventDefault(); e.stopPropagation();ข้างในif (e.keyCode)บิต
มันควรจะตั้งข้อสังเกตกันว่าการใช้live()ใน jQuery ได้รับการเลิกใช้ตั้งแต่รุ่น1.7และได้รับการถอดออกใน 1.9jQuery แต่on()แนะนำให้ใช้งานแทน
ฉันขอแนะนำวิธีการดังต่อไปนี้สำหรับการผูกมัดเนื่องจากเป็นการแก้ปัญหาที่อาจเกิดขึ้นต่อไปนี้
document.bodyและผ่านตัวเลือก $ เป็นอาร์กิวเมนต์ที่สองไปยังon()องค์ประกอบสามารถแนบ, แยกออก, เพิ่มหรือลบออกจาก DOM โดยไม่จำเป็นต้องจัดการกับเหตุการณ์ที่มีผลผูกพันหรือผูกพันสองครั้ง นี่เป็นเพราะเหตุการณ์ถูกแนบกับdocument.bodyแทนที่จะเป็น$selectorโดยตรงซึ่งหมายความว่า$selectorสามารถเพิ่มลบและเพิ่มอีกครั้งและจะไม่โหลดเหตุการณ์ที่ถูกผูกไว้off()มาก่อนon()สคริปต์นี้สามารถอยู่ได้ทั้งภายในส่วนเนื้อหาหลักของหน้าหรือภายในเนื้อความของการโทร AJAX โดยไม่ต้องกังวลเกี่ยวกับเหตุการณ์ที่มีผลผูกพันสองครั้งโดยไม่ตั้งใจ$(function() {...})นี้สามารถโหลดอีกครั้งโดยเนื้อหาหลักของหน้าหรือภายในเนื้อหาของการโทร AJAX $(document).ready()ไม่ถูกไล่ออกสำหรับคำขอ AJAX ในขณะที่$(function() {...})ทำนี่คือตัวอย่าง:
<!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>หากอินพุตของคุณคือsearchคุณยังสามารถใช้on 'search'เหตุการณ์ได้ ตัวอย่าง
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});รหัส HTML: -
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">รหัสจาวาสคริปต์
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;
}แบบฟอร์มของคุณไม่มีปุ่มส่งเริ่มต้น
อีกรูปแบบที่ลึกซึ้ง ฉันแยกอำนาจออกไปเล็กน้อยดังนั้นฉันจึงมีปลั๊กอินที่จะเปิดใช้งานการจับคีย์ Enter จากนั้นฉันก็แค่ผูกเข้ากับกิจกรรมตามปกติ:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);และในการใช้งาน:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });ชุดรูปแบบนี้ช่วยให้คุณใช้การมอบหมายกิจกรรม (เพื่อผูกกับองค์ประกอบที่คุณยังไม่ได้สร้าง)
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });ฉันไม่สามารถทำให้keypressเหตุการณ์เริ่มทำงานสำหรับปุ่มป้อนและทำให้หัวของฉันมีรอยขีดข่วนได้บ้างจนกว่าฉันจะอ่านเอกสาร jQuery:
" เหตุการณ์ keypress ถูกส่งไปยังองค์ประกอบเมื่อเบราว์เซอร์ลงทะเบียนคีย์บอร์ดซึ่งคล้ายกับเหตุการณ์ keydown ยกเว้นว่าตัวดัดแปลงและคีย์ที่ไม่ได้พิมพ์เช่น Shift, Esc และลบเหตุการณ์ keydown ทริกเกอร์ แต่ไม่ใช่เหตุการณ์ keypress " ( https://api.jquery.com/keypress/ )
ฉันต้องใช้keyupหรือkeydownกิจกรรมเพื่อกดปุ่ม Enter