Gibt es ein Ereignis in Jquery, das nur ausgelöst wird, wenn der Benutzer die Eingabetaste in einem Textfeld drückt? Oder ein Plugin, das hinzugefügt werden kann, um dies einzuschließen? Wenn nicht, wie würde ich ein schnelles Plugin schreiben, das dies tun würde?
Antworten:
Sie können Ihr eigenes benutzerdefiniertes Ereignis verkabeln
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodeTasten für einige Schlüssel, die besser zu verwenden e.whichsind. Dies garantiert, dass Sie in jedem Browser dieselbe Schaltfläche verwenden
$('#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");
}
});Hier ist ein Plugin für dich: (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')})$Variablen für das Plugin keine gute Idee, da dies zu Konflikten führen kann.
$("#myInput").bind('click, onEnter', myCallback);und es funktioniert, ohne dass etwas anderes benötigt wird?
Hier ist ein JQuery-Plugin, um das zu tun
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);Um es zu verwenden, fügen Sie den Code hinzu und richten Sie ihn folgendermaßen ein:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this)diese Weise aufrufen . Auf diese Weise können Sie innerhalb der Rückruffunktion thiswie gewohnt auf das Element zugreifen, für das das Ereignis ausgelöst wurde.
e.preventDefault(); e.stopPropagation();das if (e.keyCode)Bit hinzu.
Es ist zu beachten, dass die Verwendung von live()in jQuery seit der Version veraltet ist 1.7und in jQuery entfernt wurde 1.9. Stattdessen wird die Verwendung von on()empfohlen.
Ich würde die folgende Bindungsmethode dringend empfehlen, da sie die folgenden potenziellen Herausforderungen löst:
document.bodyund Übergeben von $ selector als zweites Argument an on()können Elemente angehängt, getrennt, hinzugefügt oder aus dem DOM entfernt werden, ohne dass erneut bindende oder doppelt bindende Ereignisse behandelt werden müssen. Dies liegt daran, dass das Ereignis document.bodynicht $selectordirekt, sondern angehängt ist. Dies bedeutet, $selectordass es hinzugefügt, entfernt und erneut hinzugefügt werden kann und das daran gebundene Ereignis niemals geladen wird.off()vor on(), kann dieses Skript lebt entweder innerhalb innerhalb des Hauptkörpers der Seite oder im Körper eines AJAX - Aufruf, ohne sich um versehentlich doppelt Bindungsereignisse zu kümmern.$(function() {...})kann dieses Skript erneut entweder vom Hauptteil der Seite oder vom Hauptteil eines AJAX-Aufrufs geladen werden. $(document).ready()wird nicht für AJAX-Anfragen ausgelöst, während dies der $(function() {...})Fall ist.Hier ist ein Beispiel:
<!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>Wenn Ihre Eingabe ist search, können Sie auch on 'search'event verwenden. Beispiel
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});HTML Quelltext:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Java Script Code
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;
}Ihr Formular verfügt nicht über die Standard-Senden-Schaltfläche
Eine weitere subtile Variation. Ich habe mich für eine leichte Gewaltenteilung entschieden, daher habe ich ein Plugin, mit dem ich die Eingabetaste abfangen kann. Dann binde ich mich normalerweise an Ereignisse:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);Und dann im Einsatz:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Mit dieser Variante können Sie die Ereignisdelegierung verwenden (um an Elemente zu binden, die Sie noch nicht erstellt haben).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Ich konnte das keypressEreignis nicht für die Eingabetaste auslösen und kratzte mir einige Zeit am Kopf, bis ich die jQuery-Dokumente gelesen hatte:
" Das Tastendruckereignis wird an ein Element gesendet, wenn der Browser Tastatureingaben registriert. Dies ähnelt dem Keydown-Ereignis, außer dass Modifikator- und nicht druckbare Tasten wie Shift, Esc und Delete Keydown-Ereignisse auslösen, jedoch keine Tastendruckereignisse. " ( https://api.jquery.com/keypress/ )
Ich musste das Ereignis keyupoder verwenden keydown, um einen Druck auf die Eingabetaste zu erhalten.