Jak zaimplementować wymianę <input type = “text”> z jQuery?

<select>ma ten interfejs API. O co chodzi <input>?

Możesz użyć .change()

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

Jednak to zdarzenie zostanie uruchomione tylko wtedy, gdy selektor straci ostrość, więc będziesz musiał kliknąć gdzie indziej, aby to zadziałało.

Jeśli to nie jest dla Ciebie odpowiednie, możesz użyć innych zdarzeń jQuery, takich jak keyup , keydown lub keypress - w zależności od dokładnego efektu, jaki chcesz.

Jak @pimvdb powiedział w swoim komentarzu,

Pamiętaj, że zmiana zostanie uruchomiona tylko wtedy, gdy element wejściowy straci ostrość. Istnieje również zdarzenie wejściowe, które jest uruchamiane za każdym razem, gdy pole tekstowe aktualizuje się, bez konieczności utraty fokusu. W przeciwieństwie do kluczowych wydarzeń działa również w przypadku wklejania / przeciągania tekstu.

(Zobacz dokumentację ).

To jest tak przydatne, że warto to udzielić w odpowiedzi. Obecnie (v1.8 *?) Nie ma wygody fn .input () w jquery, więc sposobem na to jest

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

Sugerowałbym użycie zdarzenia keyup jak poniżej:

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

Istnieje kilka sposobów osiągnięcia tego samego wyniku, więc myślę, że zależy to od preferencji i zależy od tego, jak dokładnie chcesz, aby działał.

Aktualizacja: działa tylko w przypadku ręcznego wprowadzania danych, a nie kopiowania i wklejania.

Do kopiowania i wklejania polecam:

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

Oto kod, którego używam:

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

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

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

Działa to całkiem nieźle, szczególnie w połączeniu z jqGridkontrolką. Możesz po prostu wpisać tekst w polu tekstowym i natychmiast wyświetlić wyniki w swoim jqGrid.

Jest jeden i tylko jeden niezawodny sposób, aby to zrobić , a jest to pobieranie wartości w określonym przedziale czasu i porównywanie jej z wartością przechowywaną w pamięci podręcznej.

Powodem, dla którego jest to jedyny sposób, jest to, że istnieje wiele sposobów zmiany pola wejściowego za pomocą różnych danych wejściowych (klawiatura, mysz, wklej, historia przeglądarki, wprowadzanie głosu itp.) I nigdy nie można ich wszystkich wykryć za pomocą standardowych zdarzeń w krzyżyku -środowisko przeglądarki.

Na szczęście dzięki infrastrukturze zdarzeń w jQuery bardzo łatwo jest dodać własne zdarzenie inputchange. Zrobiłem to tutaj:

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

Używaj go jak: $('input').on('inputchange', function() { console.log(this.value) });

Jest tutaj demo: http://jsfiddle.net/LGAWY/

Jeśli boisz się wielu interwałów, możesz powiązać / odpiąć to wydarzenie w focus/ blur.

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

Zalecam użycie thissłowa kluczowego, aby uzyskać dostęp do całego elementu, abyś był w stanie zrobić wszystko, czego potrzebujesz z tym elementem.

Poniższe działania będą działać, nawet jeśli są to wywołania dynamiczne / Ajax.

Scenariusz:

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

HTML,

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

Mam nadzieję, że ten działający kod pomoże komuś, kto próbuje uzyskać dostęp dynamiczny / połączenia Ajax ...

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

Możesz po prostu pracować z identyfikatorem

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

Możesz to zrobić na różne sposoby, jednym z nich jest keyup . Ale poniżej podam przykład ze zmianą.

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

Uwaga: wprowadź [name = "vat_id"] zastąp swoim identyfikatorem lub nazwą wejściową .

Jeśli chcesz wywołać zdarzenie podczas pisania , użyj następujących poleceń:

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

Jeśli chcesz wywołać zdarzenie w momencie opuszczenia pola wejściowego , użyj:

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

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

To zadziałało dla mnie. Jeśli pole z nazwą fieldA kliknięciu lub dowolny klawisz wszedł aktualizuje pole z id fieldB .

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

Możesz użyć .keypress().

Weźmy na przykład pod uwagę HTML:

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

Program obsługi zdarzeń można powiązać z polem wejściowym:

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

Całkowicie zgadzam się z Andym; wszystko zależy od tego, jak chcesz, aby działało.