تتبع ضغطات المفاتيح: كيف تميز النص المحدد في الصفحة؟

تتبع ضغطات المفاتيح وتمييز النص

المشكلة: تمييز النص المحدد عند الضغط على مفتاح

أحد التحديات الشائعة في تطوير تطبيقات الويب التفاعلية هو القدرة على تتبع النص الذي تم تحديده (highlighted) في الصفحة، ثم تنفيذ إجراء معين بناءً على ضغطات المفاتيح. على سبيل المثال، قد ترغب في تطبيق نمط معين على النص المحدد عند الضغط على مفتاح معين، أو استخراج النص المحدد عند الضغط على مفتاح Enter.

الحل: استخدام JavaScript و Selection API

يمكن حل هذه المشكلة باستخدام JavaScript و الـ Selection API. الـ Selection API يوفر واجهة للوصول إلى النص المحدد من قبل المستخدم في الصفحة. إليك الخطوات الأساسية:

التقاط حدث ضغط المفاتيح: استخدم addEventListener للاستماع إلى حدث keydown أو keyup على مستوى المستند (document).
الحصول على الـ Selection: داخل معالج الحدث، استخدم window.getSelection() للحصول على كائن الـ Selection الحالي.
التحقق من وجود تحديد: تأكد من وجود نص محدد باستخدام selection.rangeCount > 0.
الحصول على الـ Range: إذا كان هناك تحديد، استخدم selection.getRangeAt(0) للحصول على كائن الـ Range الذي يمثل النص المحدد.
تنفيذ الإجراء المطلوب: بناءً على المفتاح الذي تم الضغط عليه (event.key أو event.keyCode)، قم بتنفيذ الإجراء المطلوب على الـ Range. على سبيل المثال، يمكنك إضافة نمط CSS، أو استخراج النص، أو استبداله.

مثال توضيحي (HTML & JavaScript)

هذا مثال بسيط يوضح كيفية تمييز النص المحدد باللون الأصفر عند الضغط على مفتاح 'S':


<!DOCTYPE html>
<html>
<head>
<title>تمييز النص المحدد</title>
<style>
.highlighted {
  background-color: yellow;
}
</style>
</head>
<body>

<p>هذا نص يمكنك تحديده والضغط على مفتاح 'S' لتمييزه.</p>

<script>
document.addEventListener('keydown', function(event) {
  if (event.key === 'S' || event.key === 's') {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const span = document.createElement('span');
      span.className = 'highlighted';
      span.appendChild(range.extractContents());
      range.insertNode(span);
    }
  }
});
</script>

</body>
</html>

شرح الكود:

document.addEventListener('keydown', function(event) { ... });: يستمع إلى حدث الضغط على المفاتيح.
if (event.key === 'S' || event.key === 's') { ... }: يتحقق إذا كان المفتاح المضغوط هو 'S' (كبير أو صغير).
window.getSelection();: يحصل على كائن الـ Selection.
selection.rangeCount > 0: يتحقق إذا كان هناك نص محدد.
selection.getRangeAt(0);: يحصل على الـ Range الخاص بالنص المحدد.
range.extractContents();: يستخرج محتوى الـ Range (النص المحدد).
span.className = 'highlighted';: يضيف كلاس CSS لتمييز النص.
range.insertNode(span);: يدرج الـ span (النص المُميز) في الصفحة.

اعتبارات إضافية:

التوافقية: تأكد من اختبار الكود الخاص بك على مختلف المتصفحات لضمان التوافقية.
التعامل مع الـ Range: يمكن استخدام الـ Range للعديد من العمليات الأخرى، مثل استبدال النص، أو إضافة HTML، أو تعديل النمط.
الأداء: إذا كنت تتعامل مع كميات كبيرة من النص، فقد تحتاج إلى تحسين الأداء لتجنب التأخير.

باستخدام هذه التقنيات، يمكنك بسهولة تتبع ضغطات المفاتيح وتمييز النص المحدد في الصفحة، مما يتيح لك إنشاء تطبيقات ويب تفاعلية وغنية بالميزات.

لمزيد من التفاصيل حول هذا السؤال:

تريد تمييز النص الصفحة الأزرار التي ضغطها لوحة المفاتيح؟ الحل