Có sự kiện nào trong Jquery được kích hoạt chỉ khi người dùng nhấn nút enter trong hộp văn bản? Hoặc bất kỳ plugin nào có thể được thêm vào để bao gồm điều này? Nếu không, làm thế nào tôi sẽ viết một plugin nhanh chóng mà sẽ làm điều này?Sự kiện JQuery cho người dùng nhấn enter trong hộp văn bản?
Bạn có thể dây lên sự kiện tùy chỉnh của riêng bạn
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
Đây là một plugin dành cho bạn: (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')})
Tuyệt. Đơn giản hơn nhiều so với URL mà tôi đã đăng. Tôi tự hỏi những gì các bài báo tôi đăng là tất cả về & tại sao nó có rất nhiều mã .. – CaptSaltyJack
Quá muộn, tôi đã viết của riêng tôi: P. Nó cũng thực hiện công việc tương tự trong các dòng nhỏ hơn. Ngoài ra, việc sử dụng biến '$' cho plugin không phải là một ý tưởng hay vì nó có thể gây xung đột. –
@ClickUpvote, gói nó trong một đóng cửa nên sửa chữa rằng – Neal
heres một plugin jquery để làm điều đó
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);
để sử dụng nó, bao gồm mã và thiết lập nó như thế này:
$(function() {
console.log($("input"));
$("input").onEnter(function() {
$(this).val("Enter key pressed");
});
});
Tốt, tôi sẽ gọi hàm gọi lại bằng cách sử dụng 'func.apply (this)', theo cách đó bên trong hàm gọi lại, bạn có thể sử dụng 'this' như bình thường để truy cập yếu tố mà sự kiện đã được kích hoạt. –
vâng, điểm tốt về func.apply (điều này), thậm chí đã không xem xét điều đó. – jzilla
Tốt và súc tích, nhưng tôi muốn thêm rằng việc tuyên truyền và mặc định dừng sẽ là một ý tưởng hay trong hầu hết các trường hợp, để ngăn bất kỳ việc gửi biểu mẫu nào. Chỉ cần thêm '' 'e.preventDefault(); e.stopPropagation(); '' 'bên trong' '' if (e.keyCode) '' 'bit. –
$('#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");
}
});
Cảm ơn - Giải pháp này được trang bị vỏ máy của tôi. Tuy nhiên, cần lưu ý rằng khi đã xử lý xong, bạn có thể muốn thêm '$ (this) .removeAttr (" disabled ");' để kích hoạt lại hộp văn bản. – misterjaytee
Cần cũng lưu ý rằng việc sử dụng live() trong jQuery đã bị phản đối kể từ phiên bản 1.7 và đã được xóa trong jQuery 1.9. Thay vào đó, bạn nên sử dụng on().
Tôi rất muốn đề nghị phương pháp sau đây để ràng buộc, vì nó giải quyết những thách thức tiềm năng sau đây:
document.body và đi qua $ selector như là đối số thứ hai để on(), các yếu tố có thể được đính kèm, tách ra, thêm vào hoặc loại bỏ khỏi DOM mà không cần phải đối phó với các sự kiện ràng buộc lại hoặc ràng buộc đôi. Điều này là do sự kiện được đính kèm với document.body thay vì trực tiếp $selector, có nghĩa là $selector có thể được thêm, xóa và thêm lại và sẽ không bao giờ tải sự kiện được liên kết với sự kiện đó.off() trước on(), tập lệnh này có thể nằm trong nội dung chính của trang hoặc trong cơ thể của cuộc gọi AJAX mà không phải lo lắng về các sự kiện liên kết kép vô tình.$(function() {...}), tập lệnh này một lần nữa có thể được tải bởi cơ quan chính của trang hoặc trong phần nội dung của cuộc gọi AJAX. $(document).ready() không bị sa thải đối với các yêu cầu AJAX, trong khi $(function() {...}) thực hiện.Dưới đây là một ví dụ:
<!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>
Đó phải là event.keyCode == 13 – jasonmcclurg
đúng và cố định. –
Một biến thể tinh tế. tôi đã đi cho một tách nhẹ quyền hạn, vì vậy tôi có một plugin cho phép bắt phím enter, sau đó tôi chỉ gắn với các sự kiện bình thường:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);
Và sau đó được sử dụng:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });
này biến thể cho phép bạn sử dụng ủy quyền sự kiện (để liên kết với các phần tử bạn chưa tạo).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
HTML Code: -
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Java Script Mã
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;
}
Mẫu của bạn không có mặc định Gửi Nút
Nó đáng chú ý là trong một kịch bản nhập phát hiện để ngăn chặn fo rm trình, "keyup" sự kiện không phải là tối ưu bởi vì các hình thức phát hiện nộp trên keydown. Vì vậy, "keydown" hoặc "keypress" có thể tốt hơn trong trường hợp đó. – TechNyquist
Lưu ý, bind() không được chấp nhận trong jQuery 3.0. –