كيف يمكنني التركيز على لوحة المفاتيح إلى DIV وإرفاق معالجات أحداث لوحة المفاتيح بها؟

StackOverflow https://stackoverflow.com/questions/148361

  •  02-07-2019
  •  | 
  •  

سؤال

أقوم بإنشاء تطبيق حيث أريد أن أتمكن من النقر فوق مستطيل يمثله DIV، ثم استخدم لوحة المفاتيح لنقل DIV هذا عن طريق إدراج أحداث لوحة المفاتيح.

بدلاً من استخدام مستمع الأحداث لأحداث لوحة المفاتيح على مستوى المستند، هل يمكنني الاستماع إلى أحداث لوحة المفاتيح على مستوى DIV، ربما من خلال التركيز عليها من خلال لوحة المفاتيح؟

إليك نموذج مبسط لتوضيح المشكلة:

<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>

عند النقر على DIV الداخلي، أحاول التركيز عليه، ولكن يتم دائمًا التقاط أحداث لوحة المفاتيح اللاحقة على مستوى المستند، وليس مستمع الأحداث على مستوى DIV الخاص بي.

هل أحتاج ببساطة إلى تنفيذ فكرة خاصة بالتطبيق لتركيز لوحة المفاتيح؟

يجب أن أضيف أنني بحاجة إلى هذا فقط للعمل في Firefox.

هل كانت مفيدة؟

المحلول

تم الترتيب - أضفت سمة tabindex إلى DIV الهدف، مما يؤدي إلى التقاط أحداث لوحة المفاتيح، على سبيل المثال

<div id="inner" tabindex="0">
    this div can now have focus and recieve keyboard events
</div>

المعلومات المستقاة من http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

نصائح أخرى

تعمل إجابة بول بشكل جيد، ولكن يمكنك أيضًا استخدام contentEditable، مثل هذا...

document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();

قد يكون من الأفضل في بعض الحالات.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top