الفرق بين المراجعتين لصفحة: «JavaScript/Document/activeElement»

المراجعة الحالية بتاريخ 16:08، 22 مارس 2018

مُلاحظة: هذه خاصيّة تجريبيّة، انظر جدول دعم المتصفحات قبل استعمالها في شيفرة إنتاجيّة.

الخاصيّة القابلة للقراءة فقط activeElement المُعرّفة على الواجهة DocumentOrShadowRoot تُعيد العنصر المتواجد في شجرة الظّل (shadow tree) أو في DOM المفعّل حاليًا (أي المركَّز عليه، focus).

يُمكن أن يكون هذا كائن <input> أو <textarea> إن كان هناك تظليل نصيّ في وقت التّركيز على هذه المُكوّنات. إن كان الأمر كذلك، فيُمكنك الحصول على تفاصيل أكثر عبر استعمال خصائص العنصر selectionStart أو selectionEnd. يُمكن كذلك أن يكون العُنصر المُركّز عليه عنصرَ <select> أو عنصر إدخال <input> من النّوع button (زرّ) أو checkbox (صندوق تأشير) أو radio (زرّ انتقاء).

مُلاحظة: العناصر غير عناصِر الإدخال النّصيّة قد لا تُوضع في وضع تركيزٍ عليها في نظام Mac.

يُمكن للمُستخدم الضَغط على زرّ TAB في لوحة المفاتيح لنقلِ التّركيز من عنصرٍ قابِل للتّركيز عليه إلى آخرٍ داخل الصّفحة، واستعمال زرّ المسافة SPACE لتفعيل العنصر (أي الضّغط مثلًا على زرّ أو اختيار خيارٍ ما من خيارات أزرار الانتقاء).

مُلاحظة: لا تخلِط بين تركيزٍ (focus) على عنصر بتظليل (selection) نصّ مُعيّن على المُستند، انظر الخاصيّة ‎window.getSelection()‎ لما يتعلّق بتظليل العناصر.

إن لم يكن هناك أي تركيز، فالعنصر المُفعّل يكون إمّا عنصرَ <body> أو القيمة null.

البنية العامة

var element = DocumentOrShadowRoot.activeElement

القيمة المُعادة تكون إمّا كائنًا من النّوع Element أو القيمة null إن لم يكن هناك أي تركيز.

مثال

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" charset="utf-8">
    function init() {

        function onMouseUp(e) {
            console.log(e);
            var outputElement = document.getElementById('output-element');
            var outputText = document.getElementById('output-text');
            var selectedTextArea = document.activeElement;
            var selection = selectedTextArea.value.substring(
            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
            outputElement.innerHTML = selectedTextArea.id;
            outputText.innerHTML = selection;
        }

        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
    }
    </script>
</head>
<body onload="init()">
<div>
    ظلّل على جزء من النّص في أي من صندوقي الإدخال التّاليين
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
صندوق إدخال مُتعدّد الأسطر، المثال الأول 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea>
<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
صندوق إدخال مُتعدّد الأسطر، المثال الثّاني
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
مُعرّف العنصر المُفعّل 
<span id="output-element"></span><br/>
النّص المُظلَّل 
<span id="output-text"></span>

</body>
</html>

دعم المتصفحات

الميزة	Chrome	Internet Explorer	Firefox	Opera	Safari
الدعم الأساسي	53	نعم	نعم	40	نعم

مصادر ومواصفات

مواصفة Shadow DOM

@@ سطر 4: / سطر 4: @@
 الخاصيّة القابلة للقراءة فقط <code>activeElement</code> المُعرّفة على الواجهة  <code>DocumentOrShadowRoot</code> تُعيد العنصر المتواجد في شجرة الظّل (shadow tree) أو في DOM المفعّل حاليًا (أي المركَّز عليه، focus).
-يُمكن أن يكون هذا كائن  <code>[[HTML/input|<input>]]</code> أو  <code>[[HTML/textarea|<textarea>]]</code> إن كان هناك تظليل نصيّ في وقت التّركيز على هذه المُكوّنات. إن كان الأمر كذلك، فيُمكنك الحصول على تفاصيل أكثر عبر استعمال خصائص العنصر <code>selectionStart</code> أو <code>selectionEnd</code>. يُمكن كذلك أن يكون العُنصر المُركّز عليه عنصرَ <code>[[HTML/select|<select>]]</code> أو عنصر إدخال  <code><input></code>  من النّوع <code>button</code> (زرّ) أو <code>checkbox</code> (صندوق تأشير) أو <code>radio</code> (زرّ انتقاء).
+يُمكن أن يكون هذا كائن  <code>[[HTML/input|<input>]]</code> أو  <code>[[HTML/textarea|<textarea>]]</code> إن كان هناك تظليل نصيّ في وقت التّركيز على هذه المُكوّنات. إن كان الأمر كذلك، فيُمكنك الحصول على تفاصيل أكثر عبر استعمال خصائص العنصر <code>selectionStart</code> أو <code>selectionEnd</code>. يُمكن كذلك أن يكون العُنصر المُركّز عليه عنصرَ <code>[[HTML/select|<select>]]</code> أو عنصر إدخال  <code><input></code>  من النّوع <code>[[HTML/input/button|button]]</code> (زرّ) أو <code>[[HTML/input/checkbox|checkbox]]</code> (صندوق تأشير) أو <code>[[HTML/input/radio|radio]]</code> (زرّ انتقاء).
 '''مُلاحظة:''' العناصر غير عناصِر الإدخال النّصيّة قد لا تُوضع في وضع تركيزٍ عليها في نظام Mac.
@@ سطر 10: / سطر 10: @@
 يُمكن للمُستخدم الضَغط على زرّ TAB في لوحة المفاتيح لنقلِ التّركيز من عنصرٍ قابِل للتّركيز عليه إلى آخرٍ داخل الصّفحة، واستعمال زرّ المسافة SPACE لتفعيل العنصر (أي الضّغط مثلًا على زرّ أو اختيار خيارٍ ما من خيارات أزرار الانتقاء).
-'''مُلاحظة:''' لا تخلِط بين تركيزٍ (focus) على عنصر بتظليل (selection) نصّ مُعيّن على المُستند، انظر الخاصيّة ‎<code>window.getSelection()</code>‎ لما يتعلّق بتظليل العناصر.
+'''مُلاحظة:''' لا تخلِط بين تركيزٍ (focus) على عنصر بتظليل (selection) نصّ مُعيّن على المُستند، انظر الخاصيّة ‎<code>[[JavaScript/Window/getSelection|window.getSelection()]]</code>‎ لما يتعلّق بتظليل العناصر.
 إن لم يكن هناك أي تركيز، فالعنصر المُفعّل يكون إمّا عنصرَ  <code>[[HTML/body|<body>]]</code> أو القيمة <code>[[JavaScript/null|null]]</code>.