onKeyPress Vs. onKeyUp ve onKeyDown

Bu üç olay arasındaki fark nedir? Google'da bunu buldum:

• onKeyDownKullanıcı bir tuşa bastığında olay tetiklenir.
• onKeyUpKullanıcı bir tuşu bıraktığında olayı tetiklenir.
• onKeyPressOlay tetiklenir kullanıcı presler ve serbest bırakır (bir anahtar onKeyDownardından onKeyUp).

İlk iki anlıyorum ama değil onKeyPressaynı onKeyUp? Bir tuşu ( onKeyUp) basmadan ( ) serbest bırakmak mümkün müdür onKeyDown?

Bu biraz kafa karıştırıcı, birisi bunu benim için temizleyebilir mi?

Bu yanıtta başlangıçta kullanılan arşivlenmiş bağlantı için buraya bakın .

Bu bağlantıdan:

Teoride, onKeyDownve onKeyUpolaylar basılan veya bırakılan tuşları temsil ederken, onKeyPressolay yazılan bir karakteri temsil eder. Teorinin uygulanması tüm tarayıcılarda aynı değildir.

KeyPress, KeyUpVe KeyDownsırası ile, benzer olan: Click, MouseUp,veMouseDown .

1. Down önce olur
2. Press ikinci olur (metin girildiğinde)
3. Up en son gerçekleşir (metin girişi tamamlandığında).

İstisna, içinde ekstra bir etkinlik olan webkit'tir :

keydown
keypress
textInput     
keyup

Aşağıda, etkinliklerin ne zaman tetiklendiğini görmek için kullanabileceğiniz bir snippet bulunmaktadır:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

Buradaki cevapların çoğu, pratik konulardan çok teoriye odaklanmıştır ve en azından Firefox'ta (43'te test edilmiştir) giriş alanı değerleri ile ilişkili olduğu keyupve arasında büyük farklılıklar vardır keypress.

Kullanıcı 1boş bir girdi öğesine yazarsa:

1. Giriş öğesinin değeri, keypressişleyicinin içinde boş bir dize (eski değer) olacaktır

2. Giriş elemanının 1değeri, keyupişleyicinin içinde (yeni değer) olacaktır .

Satır içi doğrulama veya otomatik sekme gibi geçerli değer yerine girişten sonra yeni değeri bilmeye dayanan bir şey yapıyorsanız bu çok önemlidir.

Senaryo:

1. Kullanıcı 12345bir giriş öğesine yazar.
2. Kullanıcı metni seçer 12345 .
3. Kullanıcı mektubu yazar A.

Ne zaman keypressmektup girdikten sonra olay yangınlar A, metin kutusu artık yalnızca harf içerenA .

Fakat:

1. Field.val () değeri 12345 .
2. $ Field.val (). Uzunluk 5
3. Kullanıcı seçimi boş bir dizedir (seçimin üzerine yazarak neyin silindiğini belirlemenizi engeller).

Tarayıcının (Firefox 43) Kullanıcının Seçimi sileceğini görünüyor Yani, daha sonra ateşler keypressolay, daha sonra alanları içeriğini, günceller sonra yangınlar keyup.

onkeydownkısayol tuşları gibi (aşağı olduğunda ateşlenir; örneğin, Ctrl+A, Ctrl'aşağı' düzenlenmektedir.

onkeyup tuş bırakıldığında tetiklenir (değiştirici / vb. tuşları dahil)

onkeypressbir kombinasyonu olarak harekete geçirilir onkeydownve onkeyup, ya da (zaman klavye tekrar bağlı onkeyupateş değildir). (bu tekrarlama davranışı test etmediğim bir şeydir. Test yaparsanız bir yorum ekleyin!)

textInput(yalnızca webkit) bazı metinler girildiğinde tetiklenir (örneğin, Shift+Abüyük harf 'A' girer, ancak Ctrl+Ametin seçer ve herhangi bir metin girişi girmez. Bu durumda, diğer tüm etkinlikler tetiklenir)

İlk olarak, farklı anlamları vardır: ateş ederler:

• KeyDown - bir tuşa basıldığında
• KeyUp - Bir itilmiş düğme ne zaman serbest ve sonra girişinin değerine / textarea (bunlar arasında yalnızca bir) güncellenir
• KeyPress - bunlar arasında ve aslında bir anahtarın itildiği ve bırakıldığı anlamına gelmez (aşağıya bakın).

İkincisi, bazı tuşlar bu olayların bazılarını tetikler ve diğerlerini ateşlemez . Örneğin,

• KeyPress yok sayar delete, oklar PgUp/ PgDn, home/ end, ctrl,alt , shiftvb KeyDown ve KeyUp (yaklaşık bilgi edinmek yok ederken escaşağıda);
• Windows'ta pencereyi alt+ tabile değiştirdiğinizde, altpencere geçişi başka herhangi bir olaydan önce gerçekleştiği için (yalnızca KeyDown)tab , sistem tarafından engellendiğinden, en azından Chrome 71'de), varsayalım.

Ayrıca, event.keyCode(ve event.which) genellikle KeyDown ve KeyUp için aynı değere, ancak KeyPress için farklı bir değere sahip olduğunu unutmayın . Oluşturduğum oyun alanını dene . Bu arada, oldukça ilginç bir şey fark ettim: Chrome'da ctrl+ tuşuna bastığımda ave input/ textareaboş olduğunda, KeyPress ile ateş ediyor event.keyCode(veevent.which ) eşittir 1! (giriş boş olmadığında, hiç tetiklenmez).

Son olarak, bazı pragmatikler var :

• Okları işlemek için muhtemelen onKeyDown kullanmanız gerekir: kullanıcı tutarsa ↓, KeyDown birkaç kez tetiklenir (KeyUp düğmeyi bıraktığında yalnızca bir kez tetiklenir ). Ayrıca, bazı durumlarda KeyDown'ın yayılmasını kolayca engelleyebilirsiniz, ancak KeyUp'ın yayılmasını engelleyemezsiniz (veya bu kolayca yapamazsınız) (örneğin, metin alanına yeni satır eklemeden enter tuşuna göndermek istiyorsanız).
• Şaşırtıcı bir şekilde, bir tuşa bastığınızda, textareahem KeyPress hem de KeyDown ateşini birkaç kez (Chrome 71) ateşlediğinizde, birden fazla kez tetiklenen etkinliğe ve tek tuş serbest bırakma için KeyUp'a ihtiyacım olursa KeyDown'ı kullanırım.
• KeyDown, eylemlerine daha iyi yanıt vermeniz gerektiğinde oyunlar için genellikle daha iyidir.
• escgenellikle KeyDown aracılığıyla işlenir: KeyPress tetiklenmez ve KeyUp inputs için farklı davranır vetextarea farklı tarayıcılarda s (çoğunlukla odak kaybı nedeniyle)
• Bir metin alanının yüksekliğini içeriğe ayarlamak isterseniz, muhtemelen onKeyDown'ı kullanmazsınız, daha çokKeyPress'i kullanırsınız ( PS tamam, bu durumda onChange'i kullanmak daha iyidir ).

Projemdeki her üçünü de kullandım, ancak maalesef bazı pragmatikleri unutmuş olabilir. (not edilecek: olaylar inputve changeolaylar da var)

Jan Wolter'in bu makalesi , karşılaştığım en iyi parça, bağlantı kopmuşsa arşivlenmiş kopyayı burada bulabilirsiniz .

Tüm tarayıcı önemli olaylarını gerçekten iyi açıklıyor,

Keydown olay tuşuna basıldığında, tuşa basma olayı ve hemen ardından gerçekleşir. Sonra tuş takımı anahtar bırakıldığında olayı oluşturulur.

Tuş basma ve tuş basma arasındaki farkı anlamak için , karakterler ve tuşlar arasında ayrım yapmak yararlıdır . Bir anahtar bilgisayarın klavyesinde fiziksel düğmedir. Bir karakter bir düğmeye basarak yazdığınız bir semboldür. ABD klavyesinde, 4tuşu basılı tutarken Shifttuşa basmak genellikle bir "dolar işareti" karakteri üretir. Bu, dünyadaki her klavyede böyle olmak zorunda değildir. Teoride, keydown ve keyup tuş olayları basılan veya bırakılan tuşları temsil ederken, tuşa basma olayı yazılan bir karakteri temsil eder. Uygulamada, bu her zaman uygulanma şekli değildir.

Bir süre, bazı tarayıcılar tuşa basıldıktan hemen sonra textInput adlı ek bir olay başlattı . DOM 3 standardının ilk sürümleri bunu tuşa basma olayının yerine koymayı amaçladı , ancak tüm kavram daha sonra iptal edildi. Webkit sürümleri 525 ve 533 arasındaki bu destekledi ve IE destekledi söylendi, ama Webkit denir gereken muhtemel nedeni, tespit asla textInput IE denir ederken TextInput .

Ayrıca, tüm tarayıcılar tarafından desteklenen ve bir metin alanında veya giriş alanında bir değişiklik yapıldıktan hemen sonra tetiklenen giriş adı verilen bir olay da vardır . Genellikle tuşa basıldığında yazılan karakter metin alanında görünür, ardından giriş tetiklenir. Giriş olay aslında anahtar yazdığınız ne hakkında herhangi bir bilgi vermez - sen ne değiştirdi bunu anlamaya metin kutusu incelemek zorundayız - biz gerçekten bunu bir anahtar olay düşünmüyoruz böylece ve gerçekten burada belgelemediğini . Başlangıçta sadece textareas ve giriş kutuları için tanımlanmış olmasına rağmen, diğer nesne türlerine de ateşlenmesini genelleştirmek için bazı hareketler olduğuna inanıyorum.

Onkeypress ve onkeydown aynı şeyi yapıyor gibi görünüyor (yukarıda belirtilen kısayol tuşlarının küçük farkında).

Bunu deneyebilirsiniz:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

Ve tuşa basıldığında değil, tuşa basıldığında ve tuşa basıldığında olayların tetiklendiğini göreceksiniz.

Fark, olayın bir kez değil, birçok kez (tuşa basılı tuttuğunuz sürece) tetiklenmesidir. Bunun farkında olun ve uygun şekilde kullanın.

Onkeypress olayı tüm tarayıcılarda ALT, CTRL, SHIFT, ESC hariç tüm tuşlar için çalışır; burada onkeydown olayı tüm tuşlar için çalışır. İnkeydown olayı tüm tuşları yakalar anlamına gelir.

Sadece bir merak paylaşmak istedim:

bir JS yöntemini etkinleştirmek için onkeydown olayını kullanırken, bu olayın charcode'u onkeypress ile aldığınız kod ile aynı DEĞİLDİR!

Örneğin, sayısal tuş takımları, onkeypress'i kullanırken harf tuşlarının üzerindeki sayı tuşlarıyla aynı karakter kodlarını döndürür, ancak onkeydown kullanılırken DEĞİLDİR!

Onkeydown kullanırken belirli kodları kontrol eden betiğimin neden başarısız olduğunu anlamaya oldukça birkaç saniye sürdü!

Demo: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

ve evet. Ben yöntemlerin tanımının farklı olduğunu biliyorum .. ama çok kafa karıştırıcı olan şey her iki yöntemde de olay sonucu event.keyCode kullanılarak alınır olmasıdır .. ama aynı değeri döndürmez .. çok değil bildirimsel uygulama.

Temel olarak, bu olaylar farklı tarayıcı türü ve sürümü üzerinde farklı davranıyor, biraz jsBin testi oluşturdum ve bu olayların hedeflediğiniz ortam için nasıl davranacağını öğrenmek için konsolu kontrol edebilirsiniz, bu yardım umuyoruz. http://jsbin.com/zipivadu/10/edit

Güncellenmiş Yanıt:

KeyDown

• Tuşları basılı tuttuğunuzda birden çok kez tetiklenir.
• Meta anahtarı tetikler.

KeyPress

• Tuşları basılı tuttuğunuzda birden çok kez tetiklenir.
• Does not meta tuşları ateş.

KeyUp

• Anahtarı bıraktığınızda sonunda bir kez ateşlenir .
• Meta anahtarı tetikler.

Bu hem addEventListenerve ' deki davranıştır jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <- örneği deneyin

(yanıt doğru yanıt, ekran görüntüsü ve örnekle düzenlenmiştir)

Hangi olayın işleneceğine karar vermede yararlı olabilecek birkaç pratik gerçek (aşağıdaki komut dosyasını çalıştırın ve giriş kutusuna odaklanın):

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

basmak:

• yerleştirme / yazma tuşları (örn Shift. Ctrl) tetiklenmez a keypress. Basın Ctrlve bırakın:

  tuş 17 17 Kontrol

  keyup 17 17 Kontrol

• Diğer karakterlerin karakter dönüşümleri uygulamak klavyeler gelen tuşları yol açabilir Ölüler ve "tuşları" yinelenen (örn ~, ´üzerine) keydown. ´Bir çift görüntülemek için basıp bırakın ´´:

  tuş takımı 192 192 Ölü

  tuş takımı 192 192 ´´

  tuşa basma 180180 ´

  tuşa basma 180180 ´

  keyup 192192 Ölü

Ayrıca, yazılmayan girişler (örn. Aralıklı <input type="range">), basılı tuşlara göre tüm tuşlar, tuşlar ve tuş basma olaylarını tetikler.