Có sự kiện nào trong Jquery chỉ được kích hoạt nếu người dùng nhấn nút enter trong hộp văn bản không? 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 có thể viết một plugin nhanh chóng để làm điều này?
Có sự kiện nào trong Jquery chỉ được kích hoạt nếu người dùng nhấn nút enter trong hộp văn bản không? 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 có thể viết một plugin nhanh chóng để làm điều này?
Câu trả lời:
Bạn có thể kết nối 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");
}
});
e.keyCodemột số khóa khác nhau , tốt hơn để sử dụng e.which, điều này sẽ đảm bảo rằng bạn sẽ xử lý cùng một nút trên mọi trình duyệt
$('#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");
}
});
Đây là một plugin dành cho bạn: (Fiddle: http://jsfiddle.net/manoder/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')})
$biến cho plugin không phải là ý tưởng hay vì nó có thể gây ra xung đột.
$("#myInput").bind('click, onEnter', myCallback);và nó sẽ hoạt động mà không cần thêm gì nữa không?
Đây là 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");
});
});
func.apply(this), theo cách đó bên trong chức năng gọi lại mà bạn có thể sử dụng thisnhư bình thường để truy cập vào phần tử mà sự kiện được kích hoạt.
e.preventDefault(); e.stopPropagation();vào bên trong if (e.keyCode)bit.
Cần lưu ý rằng việc sử dụng live()trong jQuery đã bị từ chối kể từ phiên bản 1.7và đã bị xóa trong jQuery 1.9. Thay vào đó, việc sử dụng on()được khuyến khích.
Tôi rất muốn đề xuất phương pháp sau đây để ràng buộc, vì nó giải quyết các thách thức tiềm năng sau:
document.bodyvà chuyển $ selector làm đối số thứ hai on(), các phần tử có thể được đính kèm, tách rời, thêm hoặc xóa khỏi DOM mà không cần phải xử lý các sự kiện liên kết lại hoặc liên kết đôi. Điều này là do sự kiện được gắn vào document.bodychứ không phải $selectortrực tiếp, có nghĩa là $selectorcó thể được thêm, xóa và thêm lại và sẽ không bao giờ tải sự kiện bị ràng buộc với nó.off()trước on(), tập lệnh này có thể nằm trong phần chính của trang hoặc trong phần thân của một cuộc gọi AJAX, mà không phải lo lắng về các sự kiện liên kết đôi vô tình.$(function() {...}), tập lệnh này có thể được tải lại bởi phần chính của trang hoặc trong phần thân của lệnh gọi AJAX. $(document).ready()không bị sa thải vì các yêu cầu AJAX, trong khi $(function() {...})đó.Đâ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>
Nếu đầu vào của bạn là search, bạn cũng có thể sử dụng on 'search'sự kiện. Thí dụ
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});
Mã HTML:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Mã script Java
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;
}
Biểu mẫu của bạn không có nút Gửi mặc định
Một biến thể tinh tế khác. Tôi đã phân tách quyền hạn một chút, vì vậy tôi có một plugin để cho phép bắt phím enter, sau đó tôi chỉ liên kết với các sự kiện thông 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) { });Biến thể này cho phép bạn sử dụng phân quyền sự kiện (để liên kết với các yếu tố bạn chưa tạo).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Tôi không thể kích hoạt keypresssự kiện cho nút enter và gãi đầu một lúc, cho đến khi tôi đọc các tài liệu jQuery:
" Sự kiện nhấn phím được gửi đến một phần tử khi trình duyệt đăng ký đầu vào bàn phím. Điều này tương tự như sự kiện nhấn phím, ngoại trừ các phím bổ trợ và không in như Shift, Esc và xóa các sự kiện nhấn phím nhưng không phải là sự kiện nhấn phím. " ( https://api.jquery.com/keypress/ )
Tôi đã phải sử dụng keyuphoặc keydownsự kiện để nhấn nút enter.