Come posso implementare lo scambio di <input type = “text”> con jQuery?


Risposte:


219

Puoi usare .change()

$('input[name=myInput]').change(function() { ... });

Tuttavia, questo evento si attiva solo quando il selettore ha perso la messa a fuoco, quindi dovrai fare clic da qualche altra parte per avere questo lavoro.

Se ciò non è giusto per te, potresti usare alcuni degli altri eventi jQuery come keyup , keydown o keypress - a seconda dell'effetto esatto che desideri.


Sfortunatamente, questo non funziona per un input nascosto. Una possibile soluzione quando è richiesto uno scambio su un input nascosto è: <input type = 'text' style = 'display: none' /> (con css) ..
NickGreen

304
Si noti che changeverrà attivato solo quando l'elemento di input ha perso la messa a fuoco. C'è anche l' inputevento che si attiva ogni volta che la casella di testo si aggiorna senza che sia necessario perdere la concentrazione. A differenza degli eventi chiave, funziona anche per incollare / trascinare il testo.
pimvdb,

4
Ottimo commento @pimvdb. L'ho usato e l'ho trasformato in una risposta a questa domanda.
iPadDeveloper2011

1
Mentre sto provando questo, e ho appena imparato che l'evento si attiva solo quando sono soddisfatte due condizioni: 1) cambio di valore; e 2) sfocatura, mi chiedo se ciò che molte persone si aspettano che change () sia gestito meglio da keyup ()?
TARKUS,

Poiché changenon è supportato da IE9, puoi usare focusoutlo stesso comportamento
Soma il

247

Come ha detto @pimvdb nel suo commento,

Si noti che il cambiamento verrà attivato solo quando l'elemento di input ha perso la messa a fuoco. C'è anche l'evento di input che si attiva ogni volta che la casella di testo si aggiorna senza che sia necessario perdere lo stato attivo. A differenza degli eventi chiave, funziona anche per incollare / trascinare il testo.

(Vedi documentazione .)

Questo è così utile, vale la pena metterlo in una risposta. Attualmente (v1.8 *?) Non esiste alcuna convenienza .input () in jquery, quindi il modo per farlo è

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

6
In particolare, IE <9 non supporta affatto.
dlo

13
Dal momento che puoi legare a più eventi ha $('form').on('change input', function);fatto il trucco per me. Grazie.
Justnorris,

9
@Norris. Questo probabilmente sparerà due volte quando un elemento viene cambiato (1 °) e perde la messa a fuoco (2 °). Questo non è un problema per molti scopi, ma vale la pena notare comunque.
iPadDeveloper2011

Testato su IE9, il backspace non verrà
attivato

Nota, questo si attiverà per ogni modifica di input effettuata (che potrebbe essere quello che stai cercando). Ma, se stai cercando un evento come "Quando hai finito di cambiare", ecco un ottimo esempio .
Trevor Nestman,

79

Vorrei suggerire di utilizzare l'evento keyup come di seguito:

$('elementName').keyup(function() {
 alert("Key up detected");
});

Ci sono alcuni modi per ottenere lo stesso risultato, quindi immagino che dipenda dalle preferenze e dipende da come vuoi che funzioni esattamente.

Aggiornamento: funziona solo per input manuale, non copia e incolla.

Per copia e incolla, consiglierei quanto segue:

$('elementName').on('input',function(e){
 // Code here
});

Consiglio vivamente questo per input di testo!
Vercas,

20
Il contenuto dell'elemento di input può essere modificato senza l'attivazione del keyup. Ad esempio, puoi incollare il testo con il mouse.
celicni,

inoltre, sembra che il cambiamento sia ancora necessario per acquisire le caselle di controllo
turbo2oh,

30

Ecco il codice che uso:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

Funziona abbastanza bene, in particolare se associato a un jqGridcontrollo. Puoi semplicemente digitare in una casella di testo e visualizzare immediatamente i risultati nel tuo jqGrid.


22

C'è un solo ed unico modo affidabile per farlo , ed è tirando il valore in un intervallo e confrontandolo con un valore memorizzato nella cache.

Il motivo per cui questo è l'unico modo è perché ci sono diversi modi per cambiare un campo di input usando vari input (tastiera, mouse, incolla, cronologia del browser, input vocale ecc.) E non puoi mai rilevarli tutti usando eventi standard in una croce -ambiente browser.

Fortunatamente, grazie all'infrastruttura di eventi in jQuery, è abbastanza facile aggiungere il tuo evento inputchange. L'ho fatto qui:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

Usalo come: $('input').on('inputchange', function() { console.log(this.value) });

C'è una demo qui: http://jsfiddle.net/LGAWY/

Se hai paura di più intervalli, puoi associare / separare questo evento su focus/ blur.


È possibile far funzionare il codice in questo modo $('body').on('inputchange', 'input', function() { console.log(this.value) });:? O no, come menzionato qui: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost

13
Scrivere e lanciare un codice del genere è una follia con un impatto estremo sulle prestazioni.
Danubian Sailor,

@ ŁukaszLech Per favore, parlamene. Ma se colpisci gli eventi di messa a fuoco / sfocatura come ho già detto, l'intervallo verrà eseguito solo temporaneamente. Sicuramente, anche un 386 di Intel del 1988 può gestire un singolo intervallo?
David Hellsing,

5
<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

Ti consiglio di usare la thisparola chiave per accedere all'intero elemento in modo che tu possa fare tutto il necessario con questo elemento.


4

Di seguito funzionerà anche se si tratta di chiamate dinamiche / Ajax.

script:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

html,

<input class="addressCls" type="text" name="address" value="" required/>

Spero che questo codice di lavoro possa aiutare qualcuno che sta provando ad accedere in modo dinamico / chiamate Ajax ...


3
$("input").keyup(function () {
    alert("Changed!");
});

2

Potresti semplicemente lavorare con l'id

$("#your_id").on("change",function() {
    alert(this.value);
});

Questo non aggiunge molto alle risposte esistenti.
Pang

2

Puoi farlo in diversi modi, il keyup è uno di questi. Ma sto dando un esempio di seguito con il cambiamento.

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB: input [name = "vat_id"] sostituisci con il tuo ID di input o nome .


2

Se si desidera attivare l'evento durante la digitazione , utilizzare quanto segue:

$('input[name=myInput]').on('keyup', function() { ... });

Se si desidera attivare l'evento all'uscita dal campo di input , utilizzare quanto segue:

$('input[name=myInput]').on('change', function() { ... });

Per qualche motivo questo non ha funzionato per me, ma ha funzionato:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan,

1
@Stefan, il codice nel tuo esempio è chiamato delega degli eventi. I tuoi campi di input devono essere stati aggiunti dopo l'inizializzazione della pagina, ecco perché il mio codice non ha funzionato per te.
Usman Ahmed il

1
$("input").change(function () {
    alert("Changed!");
});

4
Il problema di questa opzione è che funziona solo quando hai perso il focus di input
Yises

Ciò andrà comunque bene in alcuni casi.
James Drinkard,

1

Questo ha funzionato per me. Se il campo con il nome FieldA si fa clic o un tasto qualsiasi entrato aggiorna campo con id FieldB .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

0

Puoi usare .keypress().

Ad esempio, considera l'HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

Il gestore eventi può essere associato al campo di input:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

Sono totalmente d'accordo con Andy; tutto dipende da come vuoi che funzioni.


1
Questo non funziona per le operazioni di copia / incolla. Nessun evento viene generato se il testo viene incollato con un clic del mouse.
DaveN59,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.