Czy w Jquery jest jakieś zdarzenie, które jest uruchamiane tylko wtedy, gdy użytkownik naciśnie przycisk Enter w polu tekstowym? Lub jakaś wtyczka, którą można dodać, aby to uwzględnić? Jeśli nie, jak napisałbym szybką wtyczkę, która by to zrobiła?
Czy w Jquery jest jakieś zdarzenie, które jest uruchamiane tylko wtedy, gdy użytkownik naciśnie przycisk Enter w polu tekstowym? Lub jakaś wtyczka, którą można dodać, aby to uwzględnić? Jeśli nie, jak napisałbym szybką wtyczkę, która by to zrobiła?
Odpowiedzi:
Możesz połączyć własne niestandardowe wydarzenie
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodedla niektórych kluczy, lepiej używaće.which , to zagwarantuje, że będziesz obsługiwać ten sam przycisk w każdej przeglądarce
$('#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");
}
});Oto wtyczka dla Ciebie: (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')})$zmiennej dla wtyczki nie jest dobrym pomysłem, ponieważ może powodować konflikty.
$("#myInput").bind('click, onEnter', myCallback);i działało bez potrzeby niczego innego?
Oto wtyczka jquery, aby to zrobić
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);aby go użyć, dołącz kod i skonfiguruj go w następujący sposób:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), w ten sposób wewnątrz funkcji wywołania zwrotnego można thisnormalnie użyć, aby uzyskać dostęp do elementu, w którym wywołano zdarzenie.
e.preventDefault(); e.stopPropagation();wewnątrz if (e.keyCode)kawałka.
Należy zauważyć, że użycie live()jQuery jest przestarzałe od wersji 1.7i zostało usunięte w jQuery 1.9. Zamiast tego on()zalecane jest użycie.
Zdecydowanie zasugerowałbym następującą metodologię wiązania, ponieważ rozwiązuje ona następujące potencjalne wyzwania:
document.bodyi przekazanie selektora $ jako drugiego argumentu on()elementy mogą być dołączane, odłączane, dodawane lub usuwane z DOM bez konieczności radzenia sobie ze zdarzeniami ponownego wiązania lub podwójnego wiązania. Wynika to z faktu, że zdarzenie jest dołączone document.bodyraczej niż $selectorbezpośrednio, co oznacza$selector można je dodawać, usuwać i dodawać ponownie i nigdy nie załaduje zdarzenia związanego z nim.off()wcześniej on(), ten skrypt może żyć w obrębie głównej strony strony lub w treści wywołania AJAX, bez konieczności martwienia się o przypadkowe podwójne powiązanie zdarzeń.$(function() {...})ten może zostać ponownie załadowany przez główną treść strony lub w treści wywołania AJAX. $(document).ready()nie zostaje zwolniony dla żądań AJAX, a jednocześnie $(function() {...}).Oto przykład:
<!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>Jeśli twoje dane wejściowe są search, możesz również użyć on 'search'zdarzenia. Przykład
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});Kod HTML:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Kod skryptu 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;
}Twój formularz nie ma domyślnego przycisku przesyłania
Kolejna subtelna odmiana. Poszedłem do lekkiego rozdzielenia mocy, więc mam wtyczkę, aby umożliwić złapanie klawisza Enter, a następnie po prostu łączę się ze zdarzeniami normalnie:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);A następnie w użyciu:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Ta odmiana umożliwia użycie delegowania zdarzeń (w celu powiązania z elementami, które nie zostały jeszcze utworzone).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Nie mogłem zmusić keypresszdarzenia do uruchomienia przycisku Enter i podrapałem się po głowie, dopóki nie przeczytałem dokumentów jQuery:
„ Zdarzenie naciśnięcia klawisza jest wysyłane do elementu, gdy przeglądarka rejestruje dane z klawiatury. Jest to podobne do zdarzenia skrótu klawiaturowego, z wyjątkiem tego, że modyfikator i klawisze niedrukowalne, takie jak Shift, Esc i usuwanie zdarzeń skrótu wyzwalacza, ale nie zdarzenia naciśnięcia klawisza. ” ( https://api.jquery.com/keypress/ )
Musiałem użyć zdarzenia keyuplub keydown, aby złapać naciśnięcie przycisku Enter.