Tôi đang xây dựng một ứng dụng mà tôi muốn có thể nhấp vào hình chữ nhật được đại diện bởi DIV, sau đó sử dụng bàn phím để di chuyển DIV đó bằng cách liệt kê các sự kiện trên bàn phím.
Thay vì sử dụng trình xử lý sự kiện cho các sự kiện bàn phím đó ở cấp tài liệu, tôi có thể nghe các sự kiện bàn phím ở cấp DIV, có lẽ bằng cách đặt tiêu điểm bàn phím cho nó?
Đây là một mẫu đơn giản để minh họa vấn đề:
<html>
<head>
</head>
<body>
<div id="outer" style="background-color:#eeeeee;padding:10px">
outer
<div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">
want to be able to focus this element and pick up keypresses
</div>
</div>
<script language="Javascript">
function onClick()
{
document.getElementById('inner').innerHTML="clicked";
document.getElementById('inner').focus();
}
//this handler is never called
function onKeypressDiv()
{
document.getElementById('inner').innerHTML="keypress on div";
}
function onKeypressDoc()
{
document.getElementById('inner').innerHTML="keypress on doc";
}
//install event handlers
document.getElementById('inner').addEventListener("click", onClick, false);
document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
document.addEventListener("keypress", onKeypressDoc, false);
</script>
</body>
</html>
Khi nhấp vào DIV bên trong, tôi cố gắng đặt tiêu điểm cho nó, nhưng các sự kiện bàn phím tiếp theo luôn được chọn ở cấp tài liệu, không phải trình nghe sự kiện cấp DIV của tôi.
Tôi có cần thực hiện khái niệm lấy nét bàn phím dành riêng cho ứng dụng không?
Tôi nên thêm Tôi chỉ cần cái này để hoạt động trong Firefox.