Oggi vediamo come eseguire un’azione o porzioni di codice al keyup (digitazione) da tastiera da parte dell’utente in un input form grazie a jQuery.
L’uso di questa procedura è particolarmente interessante sopratutto per rendere le vostre applicazioni maggiormente user friendly rendendo, ad esempio, più intuitivi i suggerimenti di compilazione di un form. Una volta compilato infatti lo script riconosce che è stato digitato qualcosa dentro l’input form ed esegue una determina funzione che nell’esempio di seguito è un semplice alert informativo. L’uso può essere poi facilmente allargato tramite l’utilizzo di ajax ad esempio per effettuare un check della mail inserita (magari in un database) durante la scrittura della stessa nell’input.
Di seguito troverete alcuni esempi di codice e how-to efficaci a questo scopo.
Struttura base
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$('form input').data('val', $('form input').val() ); // Valore
$('form input').change(function() { // Al cambiamento tramite digitazione
alert("Cambiato !");
});//CHANGE
});//DOM
Altri metodi utili ed esempi di codice
// esegue il codice quando l'utente inizia a scrivere nell'input form
$('form input').keyup(function() {
// controllo se il valore è cambiato
if( $('form input').val() != $('form input').data('val') ){
// Salvo il nuovo valore
$('form input').data('val', $('form input').val() );
// change event
$(this).change();
}
});
//METODO ALTERNATIVO
$(":input").bind("keyup change", function(e) {
// esegui il tuo codice qui
});//Fine metodo alternativo
Struttura HTML:
<form> <input type="text" placeholder="Inizia a digitare per eseguire il change..."> </form>
Come sempre vi invito a visionare i commenti al codice per capire meglio le dinamiche degli script. Questo articolo ti è stato utile? condividilo sui tuoi social network preferiti o commentalo per aiutare tutta la community!
