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

Question

< select > ha questa API. Che dire di < input > ?

Answer 1

Puoi utilizzare .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 non è del tutto giusto per te, potresti utilizzare alcuni degli altri eventi jQuery come keyup , keydown o keypress - a seconda dell'effetto esatto che desideri.

Answer 2

Come diceva @pimvdb nel suo commento,

  

Nota che il cambiamento si attiverà solo quando l'elemento di input ha perso lo stato attivo.   C'è anche l'evento di input 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.

(Vedi documentazione .)

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

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

Answer 3

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

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

Esistono 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 l'input manuale, non per il copia e incolla.

Per copia e incolla, consiglierei quanto segue:

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

Answer 4

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 controllo jqGrid . Puoi semplicemente digitare in una casella di testo e immediatamente visualizzare i risultati nel tuo jqGrid .

Answer 5

Esiste uno e un solo modo affidabile per farlo , ed è estraendo 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 un ambiente con più browser.

Fortunatamente, grazie all'infrastruttura di eventi in jQuery, è abbastanza facile aggiungere il tuo evento di 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 .

Answer 6

<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 this per ottenere l'accesso all'intero elemento in modo che tu possa fare tutto il necessario con questo elemento.

Answer 7

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

Answer 8

Quanto segue funzionerà anche se è dinamico / chiamate 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 ...

Answer 9

Potresti semplicemente lavorare con l'id

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

Answer 10

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

Answer 11

Questo ha funzionato per me. Se si fa clic sul campo con il nome campo A o si immette una chiave, il campo si aggiorna con ID campo B .

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

Answer 12

Potresti 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.

Answer 13

Puoi farlo in diversi modi, 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 [nome = " vat_id "] sostituisci con il tuo ID o nome .