JQuery ile <input type = “text”> değişimini nasıl uygularım?

<select>bu API'ya sahip. Ne olmuş <input>?

Kullanabilirsiniz .change()

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

Ancak, bu etkinlik yalnızca seçici odak kaybolduğunda tetiklenir, bu nedenle bu işi yapmak için başka bir yeri tıklamanız gerekir.

Bu sizin için doğru değilse , tam olarak istediğiniz etkiye bağlı olarak keyup , keydown veya keypress gibi diğer jQuery etkinliklerinden bazılarını kullanabilirsiniz .

@Pimvdb'nin yorumunda söylediği gibi,

Değişikliğin yalnızca giriş öğesi odağı kaybettiğinde tetikleneceğini unutmayın. Ayrıca, metin kutusu odağı kaybetmeye gerek kalmadan güncellendiğinde tetiklenen input olayı da vardır. Önemli olayların aksine, metni yapıştırmak / sürüklemek için de çalışır.

( Belgelere bakın .)

Bu çok faydalı, bir cevaba koymaya değer. Şu anda (v1.8 *?) Jquery'de .input () kolaylığı yok, bu yüzden bunu yapmanın yolu

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

Keyup olayı aşağıdaki gibi bir şey kullanarak öneririz:

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

Aynı sonucu elde etmenin birkaç yolu vardır, bu yüzden tercihinize bağlıdır ve tam olarak nasıl çalışmasını istediğinize bağlıdır.

Güncelleme: Bu sadece manuel giriş için çalışır ve kopyalayıp yapıştırmaz.

Kopyala ve yapıştır için aşağıdakileri tavsiye ederim:

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

İşte kullandığım kod:

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

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

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

Bu, özellikle bir jqGridkontrolle eşleştirildiğinde oldukça iyi çalışıyor . Sadece bir metin kutusuna yazabilir ve sonuçları hemenjqGrid .

Bunu yapmanın tek ve güvenilir bir yolu vardır ve bu değeri bir aralıkta çekerek ve önbelleğe alınmış bir değerle karşılaştırarak olur.

Bunun tek yolu olmasının nedeni, çeşitli girişleri (klavye, fare, yapıştırma, tarayıcı geçmişi, sesli giriş vb.) Kullanarak bir giriş alanını değiştirmenin birden fazla yolu olması ve bunların tümünü bir haçtaki standart olayları kullanarak asla algılayamamanızdır. tarayıcı ortamı.

Neyse ki, jQuery'deki etkinlik altyapısı sayesinde kendi inputchange etkinliğinizi eklemek oldukça kolaydır. Burada yaptım:

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

Gibi kullanın: $('input').on('inputchange', function() { console.log(this.value) });

Burada bir demo var: http://jsfiddle.net/LGAWY/

Birden aralıklarla korkuyor ediyorsanız, unbind / Bu etkinliği bağlayabilir 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 );
});

thisBu öğeyle ihtiyacınız olan her şeyi yapabilmeniz için öğenin tamamına erişmek için anahtar kelime kullanmanızı öneririz .

Dinamik / Ajax çağrıları olsa bile aşağıdakiler çalışır.

Senaryo:

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

Html,

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

Umarım bu çalışma kodu dinamik olarak erişmeye çalışan birine yardımcı olur / Ajax çağrıları ...

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

Sadece id ile çalışabilirsiniz

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

Bunu farklı şekillerde yapabilirsiniz, keyup bunlardan biridir. Ama aşağıda değişimle ilgili örnek veriyorum.

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

Not: [name = "vat_id"] girişini giriş kimliğiniz veya adınızla değiştirin .

Eğer olayı tetiklemek istiyorsanız siz yazarken şunları kullanın:

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

Giriş alanından ayrılırken olayı tetiklemek istiyorsanız aşağıdakileri kullanın:

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

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

Bu benim için çalıştı. Adı ile alan ise fieldA tıklandığında veya herhangi bir tuşa girilir o id ile alanını günceller Fieldb .

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

Kullanabilirsin .keypress().

Örneğin, HTML'yi düşünün:

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

Olay işleyici giriş alanına bağlanabilir:

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

Andy ile tamamen aynı fikirdeyim; hepsi nasıl çalışmasını istediğinize bağlıdır.