html catch event quando l'utente digita in un input di testo

Mi sto solo chiedendo come faccio a catturare l'evento quando l'utente sta digitando un campo di immissione del testo sulla mia applicazione web.html catch event quando l'utente digita in un input di testo

Lo scenario è, ho una griglia di elenco dei contatti. Nella parte superiore del modulo l'utente può digitare il nome del contatto che sta cercando di trovare. Una volta che c'è più di 1 carattere nell'input di testo, voglio iniziare a cercare i contatti nel sistema che contengono quei caratteri inseriti dall'utente. Mentre continuano a digitare le modifiche dei dati.

Tutto ciò che è veramente è una semplice funzionalità di tipo avanti (o completamento automatico) ma voglio sparare dati in un controllo diverso.

Posso togliere il testo dall'input una volta che l'input ha perso la messa a fuoco, ma questo non si adatta alla situazione.

Qualche idea?

Grazie

fonte

2012-12-11 Matt

Utilizzare l'evento [keyup] (https://developer.mozilla.org/en-US/docs/DOM/element.onkeyup). – nnnnnn

utilizzare l'evento keyup per acquisire il valore come i tipi di utente, e fare tutto ciò che è che fate per cercare quel valore:

$('input').on('keyup', function() { 
    if (this.value.length > 1) { 
      // do search for this.value here 
    } 
});

Un'altra opzione potrebbe essere l'evento input, che intercetta qualsiasi input, da chiavi, incolla ecc.

fonte

2012-12-11 21:04:25 adeneo

Si noti che se si taglia/incolla con il mouse, la chiave non si attiva ma il valore di input cambia. È anche possibile aggiungere "taglia incolla" agli eventi se questo è importante. –

Si noti che se si digita una chiave e si preme rapidamente la scheda per passare al controllo successivo, la chiave non viene sempre attivata. Se si cattura "sfocatura", che gestisce questo caso. Anche se l'aggiunta di questo evento qui farà accendere la ricerca ogni volta che si fa clic sull'input. –

@CurtisYallop - Si noti che la domanda dice * "... quando l'utente sta scrivendo" *, se si desidera catturare tutte le modifiche nel valore, l'evento 'input' lo farà. – adeneo

Vorrei utilizzare gli eventi "input" e "propertychange". Fanno fuoco anche su taglia e incolla via il mouse.

Inoltre, considera debouncing il gestore di eventi in modo che i dattilografi veloci non vengano penalizzati da molti aggiornamenti DOM.

fonte

2012-12-11 21:07:26 syazdani

veder la mia prova:

si dovrebbe mettere .combo dopo ogni classi .input.

.input è una casella di testo e .combo è un div

$(".input").keyup(function(){ 
    var val = this.value; 
    if (val.length > 1) { 
     //you search method... 
    } 
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html(""); 
}); 

$(".input").blur(function(){ 
    $(this).next(".combo").hide(); 
});

fonte

2012-12-11 21:12:34

perché non utilizzare il codice HTML oninput evento?

<input type="text" oninput="searchContacts()">

fonte

2016-04-17 12:07:36

html catch event quando l'utente digita in un input di testo

risposta

Problemi correlati