jQuery 'giriş' olayı

inputBu jsfiddle'ı görene kadar jQuery'de bir olay duymadım .

Neden çalıştığını biliyor musunuz? Bu bir takma ad mı keyupyoksa bir şey mi?

$(document).on('input', 'input:text', function() {});

Bir öğenin metin içeriği kullanıcı arabirimi üzerinden değiştirildiğinde meydana gelir.

Bu bir takma ad değildir keyupçünkü keyupanahtar hiçbir şey yapmasa bile tetiklenir (örneğin: Kontrol tuşuna basıp bırakmak bir keyupolayı tetikler ).

Bunu düşünmenin iyi bir yolu şudur: Girdi değiştiğinde tetiklenen bir olaydır. Bu, girdiyi değiştiren tuşlara basmayı (ancak bunlarla sınırlı olmamak üzere) (örneğin, Ctrlkendi başına etkinliği tetiklemeyecek, ancak Ctrl-Vbazı metin iradesini yapıştırmak için), otomatik tamamlama seçeneği, Linux stili orta seçmeyi içerir. -tık yapıştır, sürükle-bırak ve daha birçok şey.

Daha fazla ayrıntı için bu sayfaya ve bu cevaptaki yorumlara bakın.

oninput olay giriş alanlarındaki değişiklikleri izlemek için çok yararlıdır.

Ancak, IE sürümü <9'da desteklenmez. Ancak eski IE sürümlerinin kendi özel olayları onpropertychangeaynıdır oninput.

Böylece bu şekilde kullanabilirsiniz:

$(':input').on('input propertychange');

Tam bir tarayıcılar arası desteğe sahip olmak.

Örneğin, özellik değişikliği HERHANGİ BİR özellik değişikliği için tetiklenebildiğinden, devre dışı bırakılan özellik değiştirilir, bunu eklemek istersiniz:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

JQuery kullanıldığında, aşağıdakiler aynıdır:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

Bununla birlikte, inputolayla, test ettiğim tarayıcılarda yalnızca ikinci model çalışıyor gibi görünüyor.

Bu nedenle, bunun çalışmasını beklersiniz, ancak ETMEZ (en azından şu anda):

$(':text').input(function(){ doSomething(); });

Yine, etkinlik temsilcisinden yararlanmak istiyorsanız (örneğin, etkinliği DOM'nize eklenmeden #containerönce etkinliği ayarlamak için input.text), bu akla gelmelidir:

$('#container').on('input', ':text', function(){ doSomething(); });

Ne yazık ki, yine, şu anda çalışmıyor!

Sadece bu model çalışır:

$(':text').on('input', function(){ doSomething(); });

DAHA GÜNCEL BİLGİLERLE DÜZENLENMİŞ

Kesinlikle bu kalıbı doğrulayabilirim:

$('#container').on('input', ':text', function(){ doSomething(); });

ŞİMDİ, tüm 'standart' tarayıcılarda da çalışır.

Claustrofob'un dediği gibi, IE9 + için giriş desteklenmektedir.

Ancak , "ıninput olayı Internet Explorer 9'da hatalıdır. Karakterler kullanıcı arabirimi üzerinden bir metin alanından yalnızca karakterler eklendiğinde silindiğinde tetiklenmez. Internet Explorer 9'da onpropertychange olayı desteklense de, oninput olayı, aynı zamanda buggy, silme üzerine ateşlenmez.

Karakterler çeşitli şekillerde silinebildiğinden (Geri tuşu ve Sil tuşları, CTRL + X, bağlam menüsündeki Kes ve Sil komutu), tüm değişiklikleri algılamak için iyi bir çözüm yoktur. Karakterler bağlam menüsünün Sil komutu ile silinirse, değişiklik Internet Explorer 9'daki JavaScript'te algılanamaz. "

Hem giriş hem de keyup (ve Backspace tuşunu basılı tutarak IE'de ateş etmek istiyorsanız, keydown) bağlama iyi sonuçlar var.

INPUT kullanırken dikkatli olun. Bu olay IE 11'de odaklanmaya ve bulanıklığa neden olur. Ancak diğer tarayıcılarda değişiklik olduğunda tetiklenir.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Bence 'girdi' basitçe 'oninput' DOM Düzeyi O Etkinlik Modelinde olduğu gibi çalışıyor.

Bu arada:

İpek ateşinin yorumladığı gibi, ben de 'jQuery giriş etkinliği' için googled. Böylece buraya geldim ve 'input'un jquery'nin bind () komutu için kabul edilebilir bir parametre olduğunu öğrenmeye şaşırdım . Gelen Eylem jQuery (s. 102 2008 ed.) 'Giriş' ( 'bulanıklık' için 'kaldırma' den, 20 diğerlerine karşı) olası bir olay olarak bahsedilmediği edilir. Doğrudur, s. 92'de tersine, yeniden okumadan (yani Seviye 0 ve Seviye 2 modelleri arasındaki farklı dize tanımlayıcılarına yapılan bir referanstan) tahmin edilebilir. Bu oldukça yanıltıcı.

jQuery .on()yöntem için aşağıdaki imzaya sahiptir :.on( events [, selector ] [, data ], handler )

Etkinlikler, bu referansta listelenenlerden biri olabilir:

https://developer.mozilla.org/en-US/docs/Web/Events

Yine de, bunların hepsi her tarayıcı tarafından desteklenmez.

Mozilla, giriş etkinliği hakkında şunları belirtir:

Bir veya öğenin değeri değiştirildiğinde DOM giriş olayı zaman uyumlu olarak tetiklenir. Ayrıca, içeriği değiştirildiğinde içerik düzenlenebilir editörlere ateşlenir.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

hem IE'de hem de kromda çalışma