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

174

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

o mój Boże
źródło

Odpowiedzi:

219

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.

Greg
źródło
Niestety to nie działa w przypadku ukrytych danych wejściowych. Możliwym rozwiązaniem, gdy jest to wymagane, zmiana na ukrytym wejściu jest: <input type = 'text' style = 'display: none' /> (z css) ..
NickGreen
304
Zwróć uwagę, że changezostanie uruchomiona tylko wtedy, gdy element wejściowy straci ostrość. Istnieje również inputzdarzenie, które uruchamia się za każdym razem, gdy pole tekstowe aktualizuje się bez konieczności utraty koncentracji. W przeciwieństwie do kluczowych wydarzeń działa również w przypadku wklejania / przeciągania tekstu.
pimvdb,
4
Świetny komentarz @pimvdb. Wykorzystałem to i przekształciłem to w odpowiedź na to pytanie.
iPadDeveloper2011,
1
Próbuję tego i właśnie dowiedziałem się, że zdarzenie jest wywoływane tylko wtedy, gdy spełnione są dwa warunki: 1) zmiana wartości; i 2) rozmycie, zastanawiam się, czy to, czego wielu ludzi oczekuje od zmiany (), jest lepiej obsługiwane przez funkcję keyup ()?
TARKUS
Ponieważ changenie jest obsługiwany przez IE9, możesz użyć focusouttego samego zachowania
Soma,
247

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!')
});
iPadDeveloper2011
źródło
6
W szczególności IE <9 w ogóle nie obsługuje.
dlo
13
Ponieważ możesz powiązać się z wieloma wydarzeniami, $('form').on('change input', function);załatwiło mi sprawę. Dzięki.
justnorris
9
@Norris. Prawdopodobnie uruchomi się dwukrotnie, gdy element zostanie zmieniony (pierwszy) i straci skupienie (drugi). Z wielu powodów nie stanowi to problemu, niemniej jednak warto o tym pamiętać.
iPadDeveloper2011
Testowane na IE9, Backspace nie zostanie odpalony
Jaskey
Uwaga, to będzie uruchamiane przy każdej wprowadzonej zmianie danych wejściowych (która może być tym, czego szukasz). Ale jeśli szukasz wydarzenia takiego jak „Po zakończeniu zmian”, oto świetny przykład .
Trevor Nestman
79

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
});
Andrzej
źródło
Zdecydowanie polecam ten do wprowadzania tekstu!
Vercas
20
Zawartość elementu wejściowego można zmienić bez uruchamiania klucza. Na przykład możesz wkleić tekst za pomocą myszy.
celicni
ponadto wydaje się, że zmiana nadal jest wymagana do przechwytywania
pól
30

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.

Mike Gledhill
źródło
22

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.

David Hellsing
źródło
Czy jest możliwe, aby Twój kod działał w ten sposób $('body').on('inputchange', 'input', function() { console.log(this.value) });:? Albo nie, jak wspomniano tutaj: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost,
13
Pisanie i uruchamianie takiego kodu to szaleństwo o ekstremalnym wpływie na wydajność.
Danubian Sailor
@ ŁukaszLech Proszę, opowiedz mi o tym. Ale jeśli trafisz na zdarzenia ostrości / rozmycia, jak również wspomniałem, interwał będzie działał tylko tymczasowo. Z pewnością nawet Intel 386 z 1988 roku poradzi sobie z pojedynczym interwałem?
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 );
});

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.

Deweloper
źródło
4

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

Vinith
źródło
3
$("input").keyup(function () {
    alert("Changed!");
});
Phu
źródło
2

Możesz po prostu pracować z identyfikatorem

$("#your_id").on("change",function() {
    alert(this.value);
});
Siddhesh Mishra
źródło
Nie dodaje to wiele do istniejących odpowiedzi.
Pang
2

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

Rokan Nashp
źródło
2

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() { ... });
Usman Ahmed
źródło
Z jakiegoś powodu to nie zadziałało, ale zadziałało:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan
1
@Stefan, kod w Twoim przykładzie nazywa się delegowaniem zdarzeń. Twoje pola wejściowe musiały się sumować po inicjalizacji strony, dlatego mój kod nie zadziałał.
Usman Ahmed
1
$("input").change(function () {
    alert("Changed!");
});
Georg Schölly
źródło
4
Problem z tą opcją polega na tym, że działa tylko wtedy, gdy straciłeś koncentrację na wejściu
Yises,
To nadal będzie pasować do niektórych przypadków.
James Drinkard
1

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());
});
Seefan
źródło
0

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.

kcho0
źródło
1
To nie działa w przypadku operacji kopiowania / wklejania. Żadne zdarzenie nie jest uruchamiane, jeśli tekst zostanie wklejony jednym kliknięciem myszy.
DaveN59