HTML/input/color

عناصر <input> ذات النوع color توفِّر للمستخدم آليةً لتحديد لون ما، ما عبر فتح منتقي ألوان مرئي أو عبر إدخال قيمة اللون في الحقل النصي بالصيغة الست عشرية ‎#rrggbb.

<input type="color">

سيختلف تمثيل هذا العنصر كثيرًا من متصفح إلى آخر أو من نظام تشغيل إلى آخر، فقد يُعرَض هذا الحقل في أحد المتصفحات كحقلٍ نصيٍ يتم التحقق من أنَّ قيمته مكتوبة بصيغة صحيحة وتساوي لونًا ما، وقد يستعمل متصفحٌ آخر منتقي الألوان الافتراضي في نظام التشغيل، وقد يستعمل متصفحٌ ثالث نافذة منتقي ألوان خاصة به.

الخاصية value

تحتوي الخاصية value على سلسلة نصية (DOMString)، ويجب أن تكون بطول 6 محارف ذات الحالة الصغيرة (lowercase) التي تُمثِّل لونًا بصيغة RGB؛ ولا يجوز أن تكون القيمة بأي صيغة أخرى ولا يجوز أن تكون فارغة.

ضبط هذه الخاصية إلى أي قيمة لا تُمثِّل لون RGB دون شفافية بالصيغة الست عشرية سيؤدي إلى إعادة ضبط هذه الخاصية إلى القيمة ‎#000000. أي لا يمكنك استخدام أسماء الألوان القياسية في CSS أو أي دالة CSS لضبط هذه الخاصية، وهذا منطقي لأن عليك أن تضع ببالك أنَّ HTML و CSS هما لغتان منفصلتان.

يجدر بالذكر أنَّ تحديد الشفافية (alpha channel) هو أمرٌ غير مدعوم، وتحديد لون له 9 محارف سيؤدي إلى ضبط الخاصية إلى القيمة ‎#000000.

استخدام حقول انتقاء اللون

حقول الألوان سهلة الاستخدام، بسبب العدد المحدود من الخاصيات التي يمكن استعمالها معها.

توفير لون افتراضي

إضافةً إلى المثال البسيط جدًا المذكور أعلاه، يمكن إنشاء منتقي ألوان الذي تكون له قيمة افتراضية كما في المثال الآتي:

<input type="color" value="#ff0000">

إذا لم تُحدِّد قيمةً للخاصية value فالقيمة الافتراضية هي القيمة ‎#000000 أي اللون الأسود.

أذكِّر أنَّ القيمة يجب أن تكون بالصيغة الست عشرية ويجب أن يكون طولها 7 محارف تمامًا، أي يجب وضع المحرف # يليه ثلاثة أزواج من المحارف تُمثِّل قيمة اللون الأحمر والأخضر والأزرق على التوالي وبالترتيب، أي كما في السلسلة النصية ‎#rrggbb.

إذا كانت لديك الألوان بأي صيغة أخرى (مثل أسماء الألوان القياسية في CSS، أو دوال CSS مثل rgb()‎ أو rgba()‎ فعليك تحويلها قبل استعمالها مع هذا الحقل.

تتبُّع تغييرات اللون

وكما هو الحال مع أنواع العنصر <input> الأخرى، هنالك حدثان (events) يمكن استخدامهما لتتبع تغيرات اللون، ألا وهما input و change.

يُطلَق الحدث input في كل مرة يتغير فيها اللون، بينما الحدث change يُطلَق عندما يُغلِق المستخدم منتقي الألوان. ويمكن معرفة القيمة الجديدة في كلا الحالتين عبر الخاصية value.

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

تحديد القيمة

إذا كان الحقل color لا يُعرَض كمنتقي ألوان في متصفح المستخدم، وإنما يُعرَض على شكل مربع نصي، فيمكنك استخدام الخاصية select()‎ لتحديد النص الموجود حاليًا في المربع النصي، وإذا كان المتصفح يدعم منتقي الألوان فالدالة select()‎ لا تفعل شيئًا.

colorWell.select();

التحقق من الحقل

لن تكون قيمة هذا الحقل صالحةً إن لم تتمكن الواجهة الرسومية من تحويل مدخلات المستخدم إلى لون RGB مُمثَّل بسبعة محارف ذات الحالة الصغيرة (lowercase).

أمثلة

لنُنشِئ مثالًا عن حقل انتقاء اللون بتتبع الحدثين change و input عند انتقاء لون جديد، وتطبيق اللون المُختار على كل عناصر <p> الموجودة في المستند.

شيفرة HTML

شيفرة HTML بسيطة جدًا، ففيها فقرتين فيهما محتوى نصي، مع عنصر <input> ذي النوع color له المُعرِّف colorWell الذي سنستخدمه لتغيير لون الفقرتين:

<p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code>
   control.</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell">

<p>Watch the paragraph colors change when you adjust the color picker.
   As you make changes in the color picker, the first paragraph's
   color changes, as a preview (this uses the <code>input</code>
   event). When you close the color picker, the <code>change</code>
   event fires, and we detect that to change every paragraph to
   the selected color.</p>

شيفرة JavaScript

سنُنشِئ أولّا بعض المتغيرات، بما فيها اللون الافتراضي، ثم سنضبط دالة لمعالجة الحدث load الذي يُطلَق بعد اكتمال تحميل الصفحة:

var colorWell
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

عملية التهيئة

بعد انتهاء تحميل الصفحة، فستستدعى الدالة startup()‎ المرتبطة بالحدث load:

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

هذه الدالة ستُنشِئ مرجعية إلى حقل اللون في متغير باسم colorWell، ثم تضبط قيمة ذاك الحقل إلى قيمة المتغير defaultColor، ثم تربط الدالة updateFirst()‎ مع الحدث input، والدالة updateAll()‎ مع الحدث change.

ثم سنستخدم الدالة select()‎ لتحديد المحتوى النصي لحقل اللون إذا عرضه المتصفح كحقل نصي عادي.

التعامل مع تغيير اللون

لدينا دالتان للتعامل مع تغيير اللون، الدالة updateFirst()‎ التي تستدعى عند وقوع الحدث input، والتي ستُغيّر لون أوّل فقرة في المستند السابق لتُطابِق قيمة اللون المختار، ولّما كان الحدث input سيُطلَق في كل مرة يجرى فيها تعديل على قيمة الحقل (عند زيادة الإضاءة في اللون على سبيل المثال) فستحدث التغييرات في الوقت الحقيقي:

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

عندما يُغلِق المستخدم نافذة انتقاء اللون مما يشير إلى أنَّ المستخدم لن يُغيّر قيمة هذا الحقل (ما لم يفتح نافذة انتقاء اللون مرةً أخرى) فسيُطلَق الحدث change. وسنتعامل مع هذا الحدث عبر الدالة updateAll()‎:

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

الشيفرة السابقة ستؤدي إلى تغيير لون جميع عناصر <p> الموجودة في المستند إلى قيمة حقل اللون، الذي يُشار إليه عبر event.target.

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

Chrome	Firefox	Edge	Safari	Opera
20.0	29	38	10	11.01