تحليل شامل لإدارة التركيز في Javascript

عنصر التركيز

حسناً، ما هي العناصر التي يمكن أن تحصل على التركيز؟ بالافتراض، يمكن فقط للعناصر المكونة للنموذج الحصول على التركيز. لأن العناصر المكونة للنموذج يمكنها التفاعل

<input type="text" value="223">

يمكن أيضًا لغير العناصر المكونة للنموذج الحصول على التركيز، أولاً قم بتعيين خاصية tabIndex إلى -1، ثم استدعاء طريقة focus()

<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">عنصر div يحصل على التركيز</button>
<script>
btn.onclick = function(){
 test.tabIndex = -1;
 test.focus(); 
}
test.onfocus = function(){
 this.style.background = 'pink';
}
</script>

activeElement

يستخدم خاصية document.activeElement لإدارة التركيز في DOM، ويدخر عنصر التركيز الحالي

[ملاحظة] هذه الخاصية غير مدعومة في متصفح Internet Explorer

<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">عنصر div يحصل على التركيز</button>
<script>
console.log(document.activeElement);//<body>
btn.onclick = function(){
 console.log(document.activeElement);//<button>
 test.tabIndex = -1;
 test.focus(); 
 console.log(document.activeElement);//<div>
}
</script>

التركيز

هناك 4 طرق للاستيلاء على التركيز، بما في ذلك تحميل الصفحة، إدخال المستخدم (ضغط مفتاح tab)، وطرق focus() وautofocus

【1】تحميل الصفحة

بالافتراض، عند اكتمال تحميل المستند، يحتوي document.activeElement على مرجع عنصر body. خلال عملية تحميل المستند، يكون قيمة document.activeElement null

<script>
console.log(document.activeElement);//null
</script>
<body>
<script>
console.log(document.activeElement);//<body>
</script>
</body>

【2】إدخال المستخدم (ضغط مفتاح tab)

عادةً يمكن للمستخدم استخدام مفتاح tab للتنقل بين العناصر، باستخدام مفتاح السهم الفارغ لتفعيل التركيز. على سبيل المثال، إذا كان التركيز على رابط، عندئذٍ عند ضغط مفتاح السهم الفارغ مرة واحدة، سيتم الانتقال إلى هذا الرابط

مكتبة tab، لا يمكن أن لا يذكر خاصية tabindex. خاصية tabindex تستخدم لتحديد ما إذا كان العنصر الحالي للصفحة يتم تمريره باستخدام مفتاح tab، وكذلك ترتيب التمرير

1- إذا كان tabIndex يساوي -1، فإن مفتاح tab يمرر العنصر الحالي

2- إذا كان tabIndex يساوي 0، فإن مفتاح tab سيتم تمريره عبر العنصر الحالي. إذا لم يتم تعيين tabIndex لعنصر، فإن القيمة الافتراضية هي 0

3- إذا كان tabIndex أكبر من 0، فإن مفتاح tab يفضل التمرير. القيمة الأكبر تعني مستوى أقل من الأولوية

في الكود التالي، ترتبط الأزرار بالترتيب التالي عند استخدام مفتاح tab: 2،5،1،3

<div id="box">
 <button tabindex="3">1</button>
 <button tabindex="1">2</button>
 <button tabindex="0">3</button>
 <button tabindex="-1">4</button>
 <button tabindex="2">5</button> 
</div>
<script>
box.onkeyup = function(){
 document.activeElement.style.background = 'pink';
}
</script>

【3】focus()

يستخدم طريقة focus() لضبط تركيز المستعرض على مجال النموذج، أي تفعيل مجال النموذج، مما يسمح له بالاستجابة للإجراءات باللوحة المفاتيح

[النقطة] كما تم ذكره مسبقًا، إذا لم يكن العنصر نموذجيًا، فإن تعيين tabIndex إلى -1 يمكن أيضًا الحصول على التركيز

<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">يحصل العنصر span على التركيز</button>
<button id="btn2">يحصل العنصر input على التركيز</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>

【4】autofocus

　　أضافت مجال النموذج في HTML5 الخاصية autofocus، بمجرد تعيين هذه الخاصية، يمكنك نقل التركيز تلقائيًا إلى المجال المطلوب دون الحاجة إلى JavaScript

[النقطة] يمكن استخدام هذه الخاصية فقط للعناصر النموذجية، العناصر العادية حتى إذا تم تعيين tabIndex="-1" فإنها لا تنجح

<input autofocus value="abc">

hasFocus()

يُرجع method hasFocus قيمة بولية تمثل ما إذا كان هناك عنصر في مستند التركيز أو الحصول على التركيز. يمكن استخدام التحقق من التركيز في المستند لمعرفة ما إذا كان هناك تفاعل مع الصفحة

console.log(document.hasFocus());//true
//في غضون ثانيةين، انقر على علامة التبويب الأخرى لفقدان التركيز من الصفحة الحالية
setTimeout(function(){
 console.log(document.hasFocus());//false
},2000);

فقدان التركيز

إذا كنت تستخدم JavaScript لفقدان تركيز العنصر، فإنه يجب استخدام method blur

يُستخدم هدف method blur لسحب التركيز من العنصر. عند استدعاء method blur، لن يتم تحويل التركيز إلى عنصر معين؛ سينقل فقط التركيز بعيدًا عن العنصر الذي تم استدعاء هذا الهدف منه

<input id="test" type="text" value="123">
<button id="btn1">الحصول على تركيز عنصر input</button>
<button id="btn2">فقدان تركيز عنصر input</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>

أحداث التركيز

تُشغل أحداث التركيز عند الحصول أو فقدان التركيز في الصفحة. يمكن استخدام هذه الأحداث ومعالجة document.hasFocus() وميزة document.activeElement لمعرفة حركة المستخدم في الصفحة

تتضمن أحداث التركيز أربعة أحداث كما يلي

1. blur

تُشغل حدث blur عند فقدان العنصر التركيز. هذه الحدثة لا تتسلسل

2. focus

تُشغل حدث focus عند الحصول على العنصر التركيز. هذه الحدثة لا تتسلسل

3. focusin

تُشغل أحداث focusin عند الحصول على العنصر التركيز. هذه الحدثة تساوي حدث focus، ولكنها تتسلسل

4. focusout

تُشغل أحداث focusout عند فقدان العنصر التركيز. هذه الحدثة تساوي حدث blur، ولكنها تتسلسل

[النصيحة] حول أحداث focusin و focusout، باستثناء متصفح Internet Explorer يدعم معالج أحداث المستوى DOM0، فإن جميع المتصفحات الأخرى تدعم فقط معالج أحداث المستوى DOM2

<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
 <div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div>
</div>
<button id="btn1">عنصر div يحتوي على محتوى 123 يحصل على التركيز</button>
<button id="btn2">عنصر div يحتوي على محتوى 123 يفقد التركيز</button>
<button id="reset">استعادة</button>
<script>
reset.onclick = function(){history.go();}
//طريقة focus
btn1.onclick = function(){
 boxIn.tabIndex= -1;
 boxIn.focus();
}
//طريقة blur
btn2.onclick = function(){
 boxIn.blur();
}
//حدث focusin
if(boxIn.addEventListener){
 boxIn.addEventListener('focusin',handler) 
}
 boxIn.onfocusin = handler;
}
function handler(){
 this.style.backgroundColor ='lightblue';
}
if(box.addEventListener){
 box.addEventListener('focusin',handler) 
}
 box.onfocusin = handler;
} 
//حدث blur
function fnBlur(){
 this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>

من نتائج التنفيذ يمكن ملاحظة أن أحداث focusin يمكن أن تكون محوّلة؛ بينما أحداث blur لا يمكن أن تكون محوّلة　

تستخدم أحداث التركيز عادةً في عرض وتحقق النماذج

على سبيل المثال، عند الحصول على التركيز، تعديل لون الخلفية؛ عند فقدان التركيز، استعادة لون الخلفية وتحقق

<div id="box">
 <input id="input1" type="text" placeholder="يمكن فقط إدخال الأرقام">
 <input id="input2" type="text" placeholder="يمكن فقط إدخال الحروف الصينية"> 
 <span id="tips"></span>
</div>
<script>
if(box.addEventListener){
 box.addEventListener('focusin',fnIn);
 box.addEventListener('focusout',fnOut);
}
 box.onfocusin = fnIn;
 box.onfocusout = fnOut;
}
function fnIn(e){
 e = e || event;
 var target = e.target || e.srcElement;
 target.style.backgroundColor = 'lightgreen';
}
function fnOut(e){
 e = e || event;
 var target = e.target || e.srcElement;
 target.style.backgroundColor = 'initial';
 //إذا كان هذا مربع النص مخصص للتحقق من الأرقام
 if(target === input1){
 if(!/^\d*$/.test(target.value.trim())){
 target.focus();
 tips.innerHTML = 'يمكن فقط إدخال الأرقام، يرجى إعادة إدخال'
 setTimeout(function(){
 tips.innerHTML = ''
 },500);
 }
 }
 //إذا كان هذا مربع النص مخصص للتحقق من الأحرف الصينية
 if(target === input2){
 if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
 target.focus();
 tips.innerHTML = 'يمكن فقط إدخال الأحرف الصينية، يرجى إعادة إدخال'
 setTimeout(function(){
 tips.innerHTML = ''
 },500);
 }
 } 
}
</script>

الإجمال

هذا هو تلخيص جميع محتويات إدارة التركيز في جافا سكريبت الذي جمعناه لكم، هذا المقال يقدم تفصيلاً كبيراً ويتمتع بقيمة مرجعية معينة في التعلم والعمل، يمكن للجميع ترك تعليقات إذا كان لديهم أي استفسارات.

تعليمية الأساس

مفضل لك