(jQueryを使用して)DIV要素でkeypressまたはkey downイベントをどのようにトラップしますか?
DIV要素にフォーカスを与えるには何が必要ですか?
(1)tabindex
属性を設定します。
<div id="mydiv" tabindex="0" />
(2)キーダウンにバインド:
$('#mydiv').on('keydown', function(event) {
//console.log(event.keyCode);
switch(event.keyCode){
//....your actions for the keys .....
}
});
開始時にフォーカスを設定するには:
$(function() {
$('#mydiv').focus();
});
削除するには-気に入らない場合は、div
フォーカス境界線を、CSSでoutline: none
に設定します。
keyCode
の可能性については、 keycodes の表を参照してください。
JQueryを使用すると仮定したすべてのコード。
tabindex要素がフォーカスできるかどうか、およびシーケンシャルキーボードナビゲーション(通常はTab
キーを使用)に参加するかどうか/場所。完全なリファレンスについては、 MDN Web Docs をお読みください。
$( "#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>
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>
プレーンJSの例:
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>