Hoe implementeer ik OnChange of & Lt; Input Type = “Tekst” & GT; met jQuery?

<select>Heeft deze API. Hoe zit het met <input>?

Antwoord 1, Autoriteit 100%

Zoals @pimvdb zei in zijn opmerking,

Merk op dat verandering alleen brandt wanneer het invoerelement focus heeft verloren.
Er is ook de invoergebeurtenis die vuurt wanneer de tekstbox-updates
Zonder het focus te verliezen. In tegenstelling tot belangrijke gebeurtenissen werkt het ook voor
tekst plakken / slepen.

(zie Documentatie .)

Dit is zo handig, het is de moeite waard om het in een antwoord te geven. Momenteel (v1.8 *?) Er is geen .input () gemak fn in jQuery, dus de manier om het te doen is

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

Antwoord 2, Autoriteit 88%

U kunt .change()

gebruiken

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

Dit evenement zal echter alleen brandt wanneer de selector de focus heeft verloren, dus u moet ergens anders klikken om dit werk te hebben.

Als dat niet helemaal geschikt voor u is, kunt u enkele van de andere jQuery-evenementen houden als KeyUp , Keydown of keypress – afhankelijk van het exacte effect dat u wilt.

Antwoord 3, Autoriteit 32%

Ik zou willen voorstellen met het gebruik van het toetsengebeurtenis, iets zoals hieronder:

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

Er zijn een paar manieren om hetzelfde resultaat te bereiken, dus ik denk dat het de voorkeur is en hangt af van hoe je het precies wilt werken.

Update: dit werkt alleen voor handmatige invoer niet kopiëren en plakken.

Voor kopiëren en plakken zou ik het volgende aanraden:

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

Antwoord 4, Autoriteit 12%

Hier is de code die ik gebruik:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});
function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}
<input type="text" id="tbSearch" name="tbSearch" />

Dit werkt behoorlijk mooi, vooral wanneer gekoppeld is met een jqGridcontrole. U kunt gewoon in een tekstvak en typen Bekijk de resultaten in uw jqGrid.

Antwoord 5, Autoriteit 10%

Er is één en slechts één betrouwbare manier om dit te doen , en het is door de waarde in een interval te trekken en te vergelijken met een cache-waarde.

De reden waarom dit de enige manier is, is omdat er meerdere manieren zijn om een ​​invoerveld te wijzigen met behulp van verschillende ingangen (toetsenbord, muis, pasta, browsergeschiedenis, voiceinput etc.) en u kunt ze nooit allemaal detecteren met behulp van standaardgebeurtenissen in een cross-browser-omgeving.

Gelukkig, dankzij de evenementeninfrastructuur in jQuery, is het vrij eenvoudig om uw eigen inputchange-evenement toe te voegen. Ik deed dit hier:

$.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);
    }
};

Gebruik het als: $('input').on('inputchange', function() { console.log(this.value) });

Er is hier een demo: http://jsfiddle.net/LGAWY/

Als je bang bent voor meerdere intervallen, kun je deze gebeurtenis binden/ontbinden op focus/blur.

Antwoord 6, autoriteit 2%

<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 );
});

Ik raad aan om thiszoekwoord te gebruiken om toegang te krijgen tot het hele element, zodat je alles kunt doen wat je nodig hebt met dit element.

Antwoord 7, autoriteit 2%

Het volgende werkt zelfs als het dynamische/Ajax-oproepen zijn.

Script:

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

Html,

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

Ik hoop dat deze werkende code iemand helpt die dynamische/Ajax-oproepen probeert te benaderen…

Antwoord 8

Als u de gebeurtenis terwijl u typtwilt activeren, gebruikt u het volgende:

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

Als u de gebeurtenis wilt activeren bij het verlaten van het invoerveld, gebruikt u het volgende:

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

Antwoord 9

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

Antwoord 10

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

Antwoord 11

Je zou gewoon met de id kunnen werken

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

Antwoord 12

Je kunt dit op verschillende manieren doen, keyupis er één van. Maar ik geef hieronder een voorbeeld met op verandering.

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

NB: input[name=”vat_id”]vervang door uw invoer IDof name.

Antwoord 13

Dit werkte voor mij. Als op veld met de naam fieldAwordt geklikt of als er een toets wordt ingevoerd, wordt het veld bijgewerkt met id fieldB.

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

Antwoord 14

Je zou .keypress()kunnen gebruiken.

Beschouw bijvoorbeeld de HTML:

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

De gebeurtenis-handler kan worden gekoppeld aan het invoerveld:

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

Ik ben het helemaal eens met Andy; alles hangt af van hoe je wilt dat het werkt.