DIV öğesinde tuşa basma (veya tuşa basma) olayını yakalayın

150

Bir DIV öğesinde (jQuery kullanarak) tuşa basma veya tuşa basma olayını nasıl yakalarsınız?

DIV öğesine odaklanmak için ne gereklidir?

— Lalchand
kaynak

Bir div için "odaklanma" ne anlama geliyor?

— Jonathon Faust

jboyd, bir sekme dizini olduğunda sekme yapmaktan başka, onu bulmak için javascript kullanabilir ve üzerinde odak yöntemini çağırabilirsiniz.

— Brendan Enrick

@Lalchand ... cevabımı bir şekilde kabul edebilir misin? :)

— helle

Yanıtlar:

306

(1) tabindexÖzniteliği ayarlayın :

<div id="mydiv" tabindex="0" />

(2) Keydown'a bağlan:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Odağı başlangıca ayarlamak için:

$(function() {
   $('#mydiv').focus();
});

divOdak kenarlığını kaldırmak için - beğenmediyseniz - outline: noneCSS'de ayarlayın .

Daha fazla olasılık için anahtar kodları tablosuna bakın keyCode.

JQuery kullandığınızı varsayan kodun tamamı.

— helle
kaynak

+1 sekme dizini, div'i 'seçilebilir' yapmak için buradaki kilit noktadır. JQuery gerekli değil, aynı şey hem Angular hem de (sanırım) düz javascript olayları için çalışıyor.

— Jukka Dahlbom

Bunun için tarayıcı desteği nedir?

— bilinenasilya

tabindex anahtar bir kısımdır, ancak "0" dışında herhangi bir değere ayarlamayın. 0'ın üzerinde bir şey yapmak, görme engelli kullanıcılar için ekran okuyucuları karıştıracaktır (sayfadaki her şeyi atlayacak ve doğrudan 0'ın üzerindeki herhangi bir sekme dizinine gidecektir). tabindex = "0" onu "sekmeli" yapar. tabindex = "0" ile sonsuz öğelere sahip olabilirsiniz

— zonabi

<pre> ile de çalışır!

— dfmiller

Mükemmel! Tabindex özniteliğini kaçırıyordum, çünkü DIV'ler bir sekme dizini olmadığı sürece odak alamıyor olabilir. Teşekkürler dostum! Hayatımı kurtardı! DÜZENLEME: React ile de çalışır

— Vinícius Negrão

tabindex HTML niteliği, öğesinin odaklanıp odaklanamayacağını ve sıralı klavye gezinmesine (genellikle Tabtuşla) katılıp katılmayacağını / nerede olduğunu gösterir . Tam referans için MDN Web Belgelerini okuyun .

Jquery kullanma

Kod parçacığını göster

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="division" tabindex="0"></div>

Snippet'i genişlet

JavaScript kullanma

Kod parçacığını göster

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<div id="division" tabindex="0"></div>

Snippet'i genişlet

— nkshio
kaynak

aslında bunu, odaklanma olayının tetiklenmesiyle ilgili bir sorunu ararken buldum, odak kaybolan odak üzerindeki kontroller divs kaydırma çubuğunu tıklamayı söylediğinde, basitçe sekme çubuğunu div'e eklemek düzeltildi, bu yüzden çok teşekkür ederim

— MikeT

İşte düz JS'deki örnek:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Snippet'i genişlet

— Иeat Зеленько
kaynak

Bu soruya nasıl cevap veriyor?

— Poul Bak