Soru JavaScript otomatik tamamlama arama kutusu için "input" olay işleyicisini mi kullanmalıyız?


Farklı kullanımlarını ayırt etmeye çalışıyorum. keydown, keypress, keyup, input, change JavaScript’de etkinlik.

JavaScript otomatik tamamlama arama kutusuysa, kullanmak zorunda olduğumuz doğrudur. input olay işleyicisi?

Sebebi:

  1. change Kullanıcı, Enter tuşuna basana veya bu giriş kutusunu bırakmadan (Sekme tuşuyla veya giriş kutusunun dışına tıklayana kadar), olay işleyicisi çağrılmayacaktır. change Kullanıcı, giriş kutusuna bir karakter daha eklediğinde, öneride bulunma amacına muhtemelen uymaz.

  2. keydown olay işleyicisi arama terimine tuş vuruşu eklemek için kullanılabilir, ancak CTRL-v veya CMD-v (Mac'te) yapıştırmak için gerçekten keyCode gibi bir kelimeyi yapıştırırsak birer birer hello arama kutusuna - çünkü CTRL için yalnızca bir tuş ve bir tuş v, yerine hello - ama giriş kutusunu kullanabiliriz value değeri elde etmek için özellik - ancak, kullanıcı sağ tıklatmak için fareyi kullanırsa ve kutuya metin eklemek için "yapıştırma" yı seçerse - bu durumda, ya da biz bakmak için bir fare olayı işleyicisini kullanabiliriz value öznitelik? Bu kadar düşük seviyede klavye ve fare ile uğraşmak çok karışık.

Böylece input olay işleyicisi tam amacına tam olarak uyuyor gibi görünüyor çünkü HERHANGİ bir değer değişimi, input olay işleyici çalıştırılacak. İşte bu yüzden input Olay işleyici önemli ve yararlı olabilir.

Hala ihtiyacımız var. keydown olay işleyici, çünkü kullanıcı olası öğenin listesine gitmek için Aşağı Ok tuşuna basarsa ne olur? (ve muhtemelen otomatik tamamlama önerisi kutusunun kaybolmasını sağlayan ESC). Bu durumlarda input olay işleyici ve change Etkinlik işleyici çalıştırılmayacak ve keydown Bu durumlar için etkinlik yararlı olacaktır.

Yukarıdaki kavram doğru, esas olarak anlamak için doğru mu? input Etkinlik?

(Hangi olay işleyicilerinin çağrıldığını anlamak için bir jsfiddle: http://jsfiddle.net/jYsjs/ )


36
2018-03-31 07:19


Menşei


Giriş olayı o kadar iyi desteklenmiyor ki, buna güvenebileceğinizi düşünmüyorum (örneğin, Alay moduAncak bu sayfa yaklaşık 18 aylıktır. - RobG
Şimdi iyi destekleniyor caniuse.com/#feat=input-event - Yarin


Cevaplar:


Çoğunlukla haklısınız, burada olaylara ve potansiyel giriş durumlarına ayrıntılı bir bakış.

JavaScript etkinlikleri

Farklı olayın tetiklendiği zaman:

  • change

    Bu ne zaman çağrılacak blur olayın değeri, eğer <input> değiştirildi. Başka bir deyişle, girdi odağı kaybettiğinde ve değer ne olduğundan farklı olduğunda tetiklenir.

  • input

    input olay temelde aradığınız her şeydir, herhangi bir giriş değişikliğindeki olayı yakalar ve büyük ihtimalle her tuş vuruşu izleyen bir şey geliştirirken baş ağrısına neden olur. Giriş olayı, farenin içeriğe yapıştığı durumu yakalamayı bile başarıyor.

    Ne yazık ki input Etkinlik nispeten yenidir ve sadece modern tarayıcılarda kullanılabilir (IE9 +).

  • keydown

    keydown olay oldukça basittir, kullanıcı anahtarı indirdiğinde tetikler.

  • keypress

    keypress olayın olması gerekiyordu yazılan karakteri temsil eder. Bu nedenle, kullanım için hemen reddeden backspace veya delete yakalamaz. keydown.

  • keyup

    Çok gibi keydownKullanıcı bir anahtarı serbest bıraktığında tetikler.

  • paste

    Bu kullanışlı olay, veriler öğeye yapıştırıldığında tetiklenir.

Değiştirici tuşları

Bunu not et keydown, keypress ve keyup Değiştirici tuşları hakkında bilgi taşımak Ctrl, vardiya ve Alt mülklerde ctrlKey, shiftKey ve altKey sırasıyla.

Durumlarda

Göz önünde bulundurmanız gereken vakaların bir listesi:

  • Girişi klavye ile girmek (bir tuşa basılı tutmak dahil)

    Tetikleyiciler: keydown, keypress, input, keyup

  • Girişi silme (geri tuşu/silmek)

    Tetikleyiciler: keydown, input, keyup

  • Kullanarak yapıştırma Ctrl+V

    Tetikleyiciler: keydown, paste, input, keyup

  • Yapıştırmak için fareyi kullanma

    Tetikleyiciler: paste, input

  • Otomatik tamamlamadan bir öğe seçin (/)

    Tetikleyiciler: keydown, keyup

uygulama

Yukarıdakiler göz önünde bulundurulduğunda, otomatik tamamlama kutunuzu input girdideki tüm değişiklikler için olay ve sonra keydown yukarı ve aşağı işlemek için olay. Bu gerçekten her şeyi güzel bir şekilde ayıracak ve bazı oldukça temiz kodlara yol açacaktır.

IE8'i desteklemek istiyorsanız, yapıştırma dışında herşeyi atmanız gerekir. keydown olay ve sonra ele paste. paste olay şu anda oldukça yaygın bir şekilde destekleniyor ve IE v5.5'ten beri).

Etkinlikler ile denemeler yapmak

İşte jsFiddle Olayları test ederdim, yararlı bulabilirsin. Her olay hakkında biraz daha fazla bilgi gösterir:

function logEvent(e) {
    console.log(e.type +
                "\n    this.value = '" + this.value + "'" +
                (e.keyCode ? "\n    e.keyCode  = '" + e.keyCode + "'" : "") +
                (e.keyCode ? "\n    char       = '" + String.fromCharCode(e.keyCode) + "'" : ""));
    console.log(e);
}

Referanslar


50
2018-03-31 08:51



İki şey: (1) kullanırsanız input, kullanmak zorunda olmadığınız doğru değil mi? paste Etkinlik? (ayrıca bakmak zorunda olmadığınız doğrudur keydown vb çünkü input onunla ilgilenmeli). (2) eğer IE 8 yoksa inputBu, IE 8'de çalışan otomatik tamamlamayı uygulamak zorunda kalırsanız, o zaman gerçekten paste olay ve keydown Etkinlik? (sadece IE 8 diğer modern tarayıcılarla aynı şekilde davranır) - 太極者無極而生
Eğer IE8'i desteklemek istiyorsanız ve sürekli olarak daha azını kullanmanız gerekiyorsa Evet paste ve keydown. - Daniel Imms
Ne dersin contenteditable elementler? - Basile Starynkevitch
Harika bir cevap, teşekkürler. - Jonatas Walker