البرمجة

تحسين تجربة تنقل الفأرة في صفحات الويب

10/02/2024
7 2 دقائق

في البداية، يجدر بنا أن نتفحص الرابط الذي قدمته في jsfiddle (http://jsfiddle.net/uJ4PJ/) لفهم كيف تعمل عملية التنقل باستخدام مفاتيح الأسهم داخل عناصر إدخال نصية في عنصر div. يبدو أن الشيفرة البرمجية تعتمد على تحديد عناصر الإدخال داخل العنصر div ثم تطبيق السمة “tabindex” عليها لجعلها قابلة للتنقل باستخدام مفاتيح الأسهم.

بناءً على الشيفرة البرمجية المقدمة في jsfiddle، يمكنك تكييفها لتحقيق نفس الوظيفة داخل هيكل HTML الذي قدمته. إليك كيف يمكنك تحقيق ذلك:

html
html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تنقل باستخدام مفاتيح الأسهم داخل divtitle>
  <style>
    .move {
      margin: 20px;
    }

    input {
      margin-bottom: 10px;
    }
  style>
head>
<body>

<div class='move' id="container">
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="2" />
  <br>
  <input type="text" tabindex="3" />
div>

<script>
  const container = document.getElementById('container');
  const inputs = container.querySelectorAll('input');

  container.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      e.preventDefault();

      let currentIndex = Array.from(inputs).findIndex(input => document.activeElement === input);
      let nextIndex;

      if (e.key === 'ArrowUp') {
        nextIndex = currentIndex > 0 ? currentIndex - 1 : inputs.length - 1;
      } else {
        nextIndex = currentIndex < inputs.length - 1 ? currentIndex + 1 : 0;
      }

      inputs[nextIndex].focus();
    }
  });
script>

body>
html>

هذا الكود يستخدم JavaScript للتقاط الأحداث المتعلقة بضغط مفاتيح الأسهم داخل العنصر div ويقوم بتحديد العنصر التالي أو السابق بناءً على الاتجاه الذي تم الضغط عليه. كما تم إضافة السمة “tabindex” لكل عنصر إدخال لضمان تحديد الترتيب الصحيح.

المزيد من المعلومات

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

  1. هيكل HTML:
    في الهيكل الذي قدمته، يتم وضع عناصر الإدخال داخل عنصر div الذي يحمل فئة “move”. تم استخدام الوسم
    لفصل بين الحقول النصية.

    html
    <div class='move' id="container">
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="2" />
  <br>
  <input type="text" tabindex="3" />
div>

  2. الأنماط:
    تم استخدام بعض الأنماط (CSS) لتحسين مظهر الصفحة. تم تعيين هامش لعنصر div لتحسين التباعد بين العناصر وتم تعيين هامش سفلي للحقول النصية لضبط المسافة بينها.

    css
    .move {
  margin: 20px;
}

input {
  margin-bottom: 10px;
}

  3. السكريبت (JavaScript):
    في الجزء السفلي من الصفحة، تم استخدام JavaScript للتفاعل مع الصفحة. تم استهداف العنصر div باستخدام document.getElementById وتم استخدام querySelectorAll لتحديد جميع عناصر الإدخال داخله.

    javascript
    const container = document.getElementById('container');
const inputs = container.querySelectorAll('input');

    يتم إضافة مستمع الحدث keydown إلى عنصر div للتقاط أحداث الضغط على مفاتيح الأسهم.

    javascript
    container.addEventListener('keydown', (e) => {
  // ... (الشيفرة المتعلقة بمفاتيح الأسهم)
});

    يتم فحص الاتجاه باستخدام e.key لتحديد ما إذا كانت مفتاح الأسهم المضغوطة هي “ArrowUp” أو “ArrowDown”.

    javascript
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
  // ... (الشيفرة المتعلقة بمفاتيح الأسهم)
}

    ثم يتم تحديد العنصر الحالي والعنصر الذي يجب أن يكون مستهدفًا بناءً على اتجاه مفتاح السهم.

    javascript
    let currentIndex = Array.from(inputs).findIndex(input => document.activeElement === input);
let nextIndex;

if (e.key === 'ArrowUp') {
  nextIndex = currentIndex > 0 ? currentIndex - 1 : inputs.length - 1;
} else {
  nextIndex = currentIndex < inputs.length - 1 ? currentIndex + 1 : 0;
}

    أخيرًا، يتم تركيز العنصر الجديد باستخدام focus().

    javascript
    inputs[nextIndex].focus();

بهذا الشكل، يتمكن المستخدم من تنقل بين حقول الإدخال داخل العنصر div باستخدام مفاتيح الأسهم “ArrowUp” و “ArrowDown”.

الوسوم
10/02/2024
7 2 دقائق
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى