C'è qualche evento in Jquery che viene attivato solo se l'utente preme il pulsante di invio in una casella di testo? O qualche plugin che può essere aggiunto per includerlo? In caso contrario, come scriverei un plugin rapido che farebbe questo?
C'è qualche evento in Jquery che viene attivato solo se l'utente preme il pulsante di invio in una casella di testo? O qualche plugin che può essere aggiunto per includerlo? In caso contrario, come scriverei un plugin rapido che farebbe questo?
Risposte:
Puoi collegare il tuo evento personalizzato
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodeper alcuni tasti, meglio da usare e.which, questo ti garantirà che gestirai lo stesso pulsante su ogni browser
$('#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");
}
});Ecco un plugin per te: (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')})$variabile per il plugin non è una buona idea in quanto può causare conflitti.
$("#myInput").bind('click, onEnter', myCallback);e funzionerebbe senza bisogno di nient'altro?
ecco un plugin jquery per farlo
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);per usarlo, includi il codice e impostalo in questo modo:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), in quel modo all'interno della funzione di callback puoi usare thisnormalmente per accedere all'elemento su cui è stato attivato l'evento.
e.preventDefault(); e.stopPropagation();all'interno del if (e.keyCode)bit.
Va notato che l'uso di live()in jQuery è stato deprecato dalla versione 1.7ed è stato rimosso in jQuery 1.9. Si consiglia invece l'uso di on().
Consiglio vivamente la seguente metodologia per l'associazione, poiché risolve le seguenti potenziali sfide:
document.bodye passando $ selector come secondo argomento a on(), gli elementi possono essere collegati, staccati, aggiunti o rimossi dal DOM senza dover gestire eventi di rilegatura o di associazione doppia. Questo perché l'evento è associato document.bodypiuttosto che $selectordirettamente, il che significa che $selectorpuò essere aggiunto, rimosso e nuovamente aggiunto e non caricherà mai l'evento associato ad esso.off()prima on(), questo script può vivere sia all'interno del corpo principale della pagina, sia nel corpo di una chiamata AJAX, senza doversi preoccupare di eventi accidentalmente di doppia associazione.$(function() {...}), questo script può essere nuovamente caricato dal corpo principale della pagina o dal corpo di una chiamata AJAX. $(document).ready()non viene licenziato per le richieste AJAX, mentre lo $(function() {...})fa.Ecco un esempio:
<!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>Se il tuo input è search, puoi anche usare l' on 'search'evento. Esempio
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});Codice HTML: -
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Codice 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;
}Il tuo modulo non ha il pulsante di invio predefinito
Un'altra variazione sottile. Ho optato per una leggera separazione dei poteri, quindi ho un plugin per abilitare la cattura del tasto Invio, quindi mi associo normalmente agli eventi:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);E poi in uso:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Questa variazione ti consente di utilizzare la delega degli eventi (per associare elementi che non hai ancora creato).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Non sono riuscito a far scattare l' keypressevento per il pulsante di invio e mi sono grattato la testa per un po 'di tempo, fino a quando non ho letto i documenti di jQuery:
" L'evento keypress viene inviato a un elemento quando il browser registra l'input da tastiera. Questo è simile all'evento keydown, ad eccezione di quel modificatore e dei tasti non stampabili come Shift, Esc ed elimina gli eventi trigger keydown ma non gli eventi keypress. " ( https://api.jquery.com/keypress/ )
Ho dovuto usare l' evento keyupo keydownper catturare una pressione del pulsante di invio.