عناصر التركيز
ما هي العناصر التي يمكن أن تكتسب التركيز؟ بشكل افتراضي ، يمكن أن تحصل عناصر النماذج فقط على التركيز. لأن عناصر النموذج فقط يمكن أن تتفاعل
<type type = "text" value = "223">
هناك أيضًا طريقة للحصول على تركيز العناصر غير النمطية. قم أولاً بتعيين سمة tabIndex على -1 ، ثم استدعاء طريقة focus() .
<div id = "test" style = "الارتفاع: 30px ؛ العرض: 100px ؛ الخلفية: Lightgreen"> div </viv> <button id = "btn" test.focus () ؛ } test.onfocus = function () {this.style.background = 'pink' ؛} </script>النشط
يتم استخدام خاصية document.activeElement .
[ملاحظة] لا يتم دعم هذه الخاصية بواسطة متصفح IE
<div id = "test" style = "الارتفاع: 30px ؛ العرض: 100px ؛ الخلفية: lightgreen"> div </viv> <button id = "btn"> يحصل عنصر div على التركيز </button> <cript> console.log (document.activelement) ؛ // <body> btn.onclick = function () test.focus () ؛ console.log (document.activeElement) ؛ // <viv>} </script>
احصل على التركيز
هناك 4 طرق للعناصر للتركيز ، بما في ذلك تحميل الصفحات وإدخال المستخدم (اضغط على مفتاح التبويب) وطريقة focus() وخاصية autofocus
【1】 تحميل الصفحة
بشكل افتراضي ، عند تحميل المستند للتو ، يتم حفظ الإشارة إلى عنصر الجسم في document.activeElement . أثناء تحميل المستند ، تكون قيمة document.activeElement .
<script> console.log (document.activeElement) ؛ // null </script> <body> <script> console.log (document.activeElement) ؛ // <body> </script> </body>
【2】 إدخال المستخدم (اضغط على مفتاح علامة التبويب)
يمكن للمستخدمين عادة استخدام مفتاح TAB لنقل التركيز واستخدام شريط الفضاء لتفعيل التركيز. على سبيل المثال ، إذا كان التركيز على الرابط ، فاضغط على شريط الفضاء في هذا الوقت وسيقفز إلى الرابط
عندما يتعلق الأمر بمفتاح Tab ، يجب ألا نذكر سمة tabindex . يتم استخدام سمة tabindex لتحديد ما إذا كانت عقدة عنصر HTML الحالية قد تم اجتيازها بواسطة مفتاح 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 </utton> <button tabindex = "-1"> 4 </utton> <buttonex = "2" 'الوردي' ؛} </script>
【3】 التركيز ()
يتم استخدام طريقة focus() لتعيين تركيز المتصفح على حقل النموذج ، أي تنشيط حقل النموذج حتى يتمكن من الاستجابة لأحداث لوحة المفاتيح.
[ملاحظة] كما ذكرنا سابقًا ، إذا لم يكن عنصرًا نموذجًا ، فسيتم تعيينه على tabIndex إلى -1 ، يمكنك أيضًا التركيز
<span id = "test1" style = "الارتفاع: 30px ؛ العرض: 100px ؛"> span </span> <input id = "test2" value = "input"> <button id = "btn1"> تم التركيز function () {test1.tabindex = -1 ؛ test1.focus () ؛} btn2.onclick = function () {test2.focus () ؛} </script>【4】 التركيز التلقائي
تمت إضافة خاصية autofocus إلى حقل نموذج HTML5. طالما تم تعيين هذه الخاصية ، يمكن نقل التركيز تلقائيًا إلى الحقل المقابل بدون JavaScript.
[ملاحظة] لا يمكن استخدام هذه السمة إلا لعناصر النماذج. حتى إذا تم تعيين العنصر العادي على tabIndex=”-1″ ، فلن يسري.
<الإدخال Autofocus Value = "ABC">
hasfocus ()
تقوم طريقة document.hasFocus() . من خلال التحقق مما إذا كان المستند قد اكتسب التركيز ، يمكنك معرفة ما إذا كانت تتفاعل مع الصفحة.
console.log (document.hasfocus ()) ؛ // true // انقر فوق علامات تبويب أخرى في غضون ثانيتين لجعل التركيز يترك الصفحة الحالية setTimeOut (function () {console.log (document.hasfocus ()) ؛ // false} ، 2000) ؛فقدان التركيز
إذا كنت تستخدم JavaScript لتفقد التركيز ، فأنت بحاجة إلى استخدام طريقة blur()
تتمثل وظيفة طريقة blur() في إزالة التركيز من العنصر. عند استدعاء طريقة blur() ، لن يتم نقل التركيز إلى عنصر معين ؛ إنه فقط لإزالة التركيز من العنصر الذي يطلق على الطريقة
<input id = "test" type = "text" value = "123"> <button id = "btn1"> مكاسب عنصر الإدخال التركيز </button> <button id = "btn2"> يفرض عنصر الإدخال التركيز </button> <script> btn1.onclick = function () {test.focus () ؛}}}}أحداث التركيز
يتم تشغيل حدث التركيز عندما تكتسب الصفحة أو تفقد التركيز. باستخدام هذه الأحداث والتعاون مع document.hasFocus() method و document.activeElement الخاصية ، يمكنك معرفة مكان المستخدم على الصفحة.
تشمل أحداث التركيز الـ 4 التالية
1. طمس
يتم إطلاق حدث blur عندما يفقد العنصر التركيز. هذا الحدث لن يتراجع
2. التركيز
يتم إطلاق حدث focus عندما يحصل العنصر على التركيز. هذا الحدث لن يتراجع
3. التركيز
يتم إطلاق حدث focusin عندما يتم التركيز على العنصر. هذا الحدث يعادل حدث focus ، لكنه يتدفق
4. التركيز
يتم إطلاق حدث focusour عندما يفقد العنصر التركيز. هذا الحدث يعادل حدث Blur ، لكنه فقاعات
[ملاحظة] فيما يتعلق بأحداث FocusIn و Focusout ، باستثناء معالج أحداث DOM0 Level DOM0 ، تدعم متصفحات أخرى فقط معالج أحداث DOM2
<div id = "box" style = "display: inline block ؛ padding: 25px ؛ background-color: lightgreen ؛"> <div id = "boxin" style = "height: 50px ؛ width: 50px ؛ procession-color-color:">> 123 <////div> <div> LOSES FOCUS </utton> <button id = "reset"> استعادة </button> <script> reset.onclick = function () {history.go () ؛} // focus () method btn1.onclick = function () {boxin.tabindex = -1 ؛ boxin.focus () ؛} // blur () method btn2.onclick = function () {boxin.blur () ؛ = 'LightBlue' ؛} if (box.addeventListener) {box.addeventListener ('Focusin' ، Handler)} {box.onfocusin = handler ؛} // flur function fnblur () من نتائج الجري ، يمكننا أن نرى أن حدث focusin يمكن أن يفقس ؛ في حين أن حدث blur لا يمكن أن يخترق.
غالبًا ما تستخدم أحداث التركيز لعرض النماذج والتحقق منها
على سبيل المثال ، عندما تحصل على التركيز ، قم بتعديل لون الخلفية ؛ عندما تفقد التركيز ، استعد لون الخلفية والتحقق منه.
<div id = "box"> <input id = "input1" type = "text" placeholder = "فقط إدخال الأرقام"> <input id = "input2" type = "text" placeholder = "elect elect internes extrace"> <span id = "tips"> </span> </viv> <script> if (box.addeventListener) {box box.addeventListener ('focusout' ، fnout) ؛} else {box.onfocusin = fnin ؛ box.onfocusout = fnout ؛} وظيفة fnin (e) {e = e || حدث؛ var target = e.target || E.Srcelement ؛ target.style.backgroundColor = 'lightgreen' ؛} funt fnout (e) {e = e || حدث؛ var target = e.target || E.Srcelement ؛ target.style.backgroundColor = 'inial' ؛ // إذا كان مربع نص يتحقق من الرقم إذا (target === input1) {if (!/^/d*$/. test (target.value.trim ())) {target.focus () ؛ tips.innerhtml = 'elect elect only ، يرجى إعادة إدخال' setTimeout (function () {tips.innerhtml = ''} ، 500) ؛ }} // إذا كان مربع نص يتحقق من الأحرف الصينية إذا (target === input2) {if (!/^[/u4e00-/u9fa5]*$/. test (target.value.trim ())) {target.focus () ؛ tips.innerhtml = 'فقط أدخل الأحرف الصينية ، يرجى إعادة إدخال' setTimeout (function () {tips.innerhtml = ''} ، 500) ؛ }}}} </script>لخص
ما سبق هو تلخيص جميع محتوى إدارة التركيز في JavaScript لك. يتم تقديم هذه المقالة بالتفصيل ولديها قيمة مرجعية معينة لدراستك وعملك. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.