چند نمونه از وقایع قوی الگوی سیاه

فقط رنگ های ساده (بدون کانال آلفا) مجاز است اگرچه رنگ های CSS دارای قالب های بیشتری هستند ، به عنوان مثالنام های رنگی ، نمادهای کاربردی و یک قالب شش ضلعی با کانال آلفا.

ارائه این عنصر ممکن است از نظر یک مرورگر و/یا پلتفرم به دیگری متفاوت باشد-ممکن است یک ورودی ساده متنی باشد که به طور خودکار اعتبار می یابد تا اطمینان حاصل شود که اطلاعات رنگ در قالب مناسب وارد شده است ، یا یک انتخاب کننده رنگ استاندارد یا یک نوع ، یا یک نوعاز پنجره انتخاب رنگ سفارشی.

امتحانش کن

ارزش

توجه: تنظیم مقدار بر روی هر چیزی که یک رنگ معتبر ، کاملاً OPAQUE و RGB در نماد شش ضلعی نباشد ، باعث می شود که مقدار روی #000000 تعیین شود. به طور خاص ، شما نمی توانید از نام های رنگی استاندارد CSS یا هر نحوی عملکرد CSS برای تعیین مقدار استفاده کنید. این امر وقتی به خاطر داشته باشید که HTML و CSS زبان ها و مشخصات جداگانه ای هستند ، معنی دارد. علاوه بر این ، رنگ هایی با کانال آلفا پشتیبانی نمی شوند. مشخص کردن یک رنگ در نماد شش ضلعی شش ضلعی (به عنوان مثال #009900AA) نیز منجر به تنظیم رنگ روی #000000 خواهد شد.

با استفاده از ورودی های رنگی

به دلیل تعداد محدودی از ویژگی هایی که از آنها پشتیبانی می کنند ، ورودی های نوع رنگ ساده هستند.

ارائه یک رنگ پیش فرض

برای تنظیم یک مقدار پیش فرض می توانید مثال ساده فوق را به روز کنید ، به طوری که چاه رنگ از قبل با رنگ پیش فرض و انتخاب رنگ (در صورت وجود) از قبل پر شده است (در صورت وجود) نیز به آن رنگ پیش فرض می شود:

ورودی نوع="رنگ" ارزش="#FF0000" /> 

اگر مقدار را مشخص نکنید ، پیش فرض #000000 است که سیاه است. مقدار باید در نماد شش ضلعی شش ضلعی باشد ، به معنای شخصیت " #" که به دنبال آن دو رقم است که هر کدام نمایانگر قرمز ، سبز و آبی هستند ، مانند این: #RRGGBB. اگر رنگ هایی دارید که در هر قالب دیگری قرار دارند (مانند نام های رنگ CSS یا توابع رنگی CSS مانند RGB () یا RGBA ()) ، باید قبل از تعیین مقدار آنها را به شش ضلعی تبدیل کنید.

پیگیری تغییر رنگ

همانطور که در مورد انواع دیگر وجود دارد ، دو رویداد وجود دارد که می توان برای تشخیص تغییرات در مقدار رنگ: ورودی و تغییر استفاده کرد. ورودی هر بار تغییر رنگ بر روی عنصر شلیک می شود. هنگامی که کاربر انتخاب کننده رنگ را رد می کند ، رویداد تغییر اخراج می شود. در هر دو مورد ، می توانید با نگاه به مقدار آن ، مقدار جدید عنصر را تعیین کنید.

در اینجا مثالی آورده شده است که با گذشت زمان به ارزش رنگ تغییر می کند:

انتخاب کننده رنگ.addeventlistener("ورودی",به روزرسانی, دروغ);انتخاب کننده رنگ.addeventlistener("تغییر دادن",WatchColorpicker, دروغ); تابع WatchColorpicker(رویداد) مدرک.پرس و جو("پ").برای هر((p) =>  p.سبک.رنگ=رویداد.هدف.ارزش; >); > 

انتخاب مقدار

هنگامی که یک مرورگر از رابط انتخابی رنگ پشتیبانی نمی کند ، اجرای آن از ورودی های رنگی یک جعبه متن خواهد بود که به طور خودکار محتویات را تأیید می کند تا اطمینان حاصل شود که مقدار در قالب صحیح است. در این حالت می توانید از روش SELECT () برای انتخاب متن موجود در قسمت ویرایش استفاده کنید.

اگر مرورگر در عوض از یک رنگ به خوبی استفاده می کند ، انتخاب () هیچ کاری نمی کند. شما باید از این رفتار آگاه باشید تا کد شما بتواند در هر دو صورت مناسب پاسخ دهد.

کورل.انتخاب کنید(); 

اعتبار سنجی

اگر عامل کاربر نتواند ورودی کاربر را به نماد شش ضلعی از نظر شش ضلعی با کاراکتری تبدیل کند ، مقدار ورودی رنگ نامعتبر است. اگر و در صورت بروز این مورد ، کلاس شبه نامعتبر روی عنصر اعمال می شود.

مثال

بیایید مثالی ایجاد کنیم که با ردیابی وقایع تغییر و ورودی ، کمی بیشتر با ورودی رنگ انجام می دهد تا رنگ جدید را بدست آورید و آن را در هر عنصر موجود در سند اعمال کنید.

HTML

HTML نسبتاً ساده است - چند پاراگراف از مواد توصیفی با نوع رنگ با ID Colorwell ، که ما برای تغییر رنگ متن پاراگراف استفاده خواهیم کرد.

p>نمونه ای از استفاده ازرمز>& آن؛نوع ورودی = "رنگ"& gt ؛رمز>کنترل.p> برچسب برای="کورل">رنگ:برچسب> ورودی نوع="رنگ" ارزش="#FF0000" id="کورل" /> p>تماشای تغییر رنگ پاراگراف هنگام تنظیم انتخاب رنگ. همانطور که در انتخاب کننده رنگ تغییراتی ایجاد می کنید ، رنگ پاراگراف اول به عنوان پیش نمایش تغییر می کند (این از این استفاده می کندرمز>ورودیرمز>رویداد). وقتی انتخاب کننده رنگ را می بندید ،رمز>تغییر دادنرمز>آتش سوزی می شود ، و ما این مسئله را تشخیص می دهیم تا هر پاراگراف را به رنگ انتخاب شده تغییر دهیم.p> 

جاذب

اول ، برخی از تنظیمات وجود دارد. در اینجا ما برخی از متغیرها را ایجاد می کنیم ، متغیری را تنظیم می کنیم که حاوی رنگی است که هنگام بارگذاری آن ، رنگ را به خوبی تنظیم می کنیم و سپس یک کنترل کننده بار را تنظیم می کنیم تا پس از بارگیری کامل صفحه ، کار اصلی راه اندازی را انجام دهد.

اجازه دهیدکورل; محاصره کردنکولور پیش فرض= "#0000ff";پنجره.addeventlistener("بار",استارت آپ, دروغ); 

مقداردهی اولیه

پس از بارگیری صفحه ، کنترل کننده رویداد Load ما ، استارتاپ () نامیده می شود:

تابع استارت آپ() کورل=مدرک.پرسنل("#Colorwell");کورل.ارزش=کولور پیش فرض;کورل.addeventlistener("ورودی",به روزرسانی, دروغ);کورل.addeventlistener("تغییر دادن",همه را بروز رسانی کن, دروغ);کورل.انتخاب کنید(); > 

این یک مرجع به عنصر رنگ در متغیری به نام Colorwell است ، سپس مقدار ورودی رنگ را در DefaultColor به مقدار تنظیم می کند. سپس رویداد ورودی ورودی Color برای تماس با عملکرد UpdateFirst () تنظیم شده است ، و رویداد Change برای تماس با UpdateAll () تنظیم شده است. این هر دو در زیر مشاهده می شود.

در آخر ، اگر کنترل به عنوان یک قسمت متن اجرا شود ، برای انتخاب محتوای متن ورودی رنگ تماس می گیریم (در صورت ارائه رابط انتخاب کننده رنگ ، این هیچ تاثیری ندارد).

واکنش به تغییرات رنگ

ما دو کارکرد ارائه می دهیم که با تغییرات رنگ سروکار دارند. تابع UpdateFirst () در پاسخ به رویداد ورودی خوانده می شود. این رنگ عنصر پاراگراف اول را در سند تغییر می دهد تا با مقدار جدید ورودی رنگ مطابقت داشته باشد. از آنجا که رویدادهای ورودی هر بار که تنظیم بر روی مقدار انجام می شود ، شلیک می شود (به عنوان مثال ، اگر روشنایی رنگ افزایش یابد) ، با استفاده از انتخاب کننده رنگ ، این موارد به طور مکرر اتفاق می افتد.

تابع به روزرسانی(رویداد)  محاصره کردنپ=مدرک.پرسنل("پ"); if (p)  p.سبک.رنگ=رویداد.هدف.ارزش; > > 

هنگامی که انتخاب کننده رنگ برکنار می شود ، نشان می دهد که مقدار دوباره تغییر نخواهد کرد (مگر اینکه کاربر مجدداً انتخاب کننده رنگ را باز کند) ، یک رویداد تغییر به عنصر ارسال می شود. ما با استفاده از عملکرد updateall () ، با استفاده از event. target. value برای به دست آوردن رنگ انتخاب شده نهایی ، آن رویداد را اداره می کنیم:

تابع همه را بروز رسانی کن(رویداد) مدرک.پرس و جو("پ").برای هر((p) =>  p.سبک.رنگ=رویداد.هدف.ارزش; >); > 

این رنگ هر بلوک را به گونه ای تنظیم می کند که ویژگی رنگ آن با مقدار فعلی ورودی رنگ مطابقت داشته باشد ، که به استفاده از Event. Target اشاره شده است.

نتیجه

نتیجه نهایی به این شکل است: