درس ۴۰ از ۴۵ · صفحه‌های وب

صفحه‌کلید و فرم‌ها

رویدادهای ماوس کارها را شروع می‌کنند و رویدادهای صفحه‌کلید و فرم آن‌ها را تمام: جست‌وجویی که با هر حرف فهرست را کوتاه می‌کند، میانبری که ذخیره می‌کند، پیامی که می‌گوید کادر چه ایرادی دارد. این درس رویدادهای کلید، فوکوس، کادرهای متن، فرم‌ها، حافظه‌ی موقت و عنصرهایی را که باز و بسته می‌شوند مرور می‌کند، و زیر هر بخش نمونه‌ای هست که امتحانش کنید.

در این درس

کلیدها: فشردن، رها کردن و فشار
Enter، Escape، جهت‌نماها و میانبرها
فوکوس و از دست دادن فوکوس
نوشتن در کادر: ورودی، تغییر و پیش از ورودی
انتخاب متن
ارسال، بازنشانی و داده‌ی فرم
وارسی کادرها: نامعتبر
رونوشت، برش و چسباندن
جزئیات، واشو، پنجره‌ی گفتگو و جست‌وجو در صفحه
مرجع: همه‌ی رویدادهای صفحه‌کلید و فرم
خودتان امتحان کنید

کلیدها: فشردن، رها کردن و فشار

فشردن یک کلید فشردن کلید (keydown) می‌فرستد. اگر کلید را نگه دارید مرورگر فشردن کلید را بارها می‌فرستد و در تکرارها خاصیت repeat درست است. رها کردن کلید رها کردن کلید (keyup) می‌فرستد. رویداد سومی هم هست، فشار کلید (keypress)، که فقط برای کلیدهایی رخ می‌دهد که نویسه‌ای می‌سازند و منسوخ شده است. در کد تازه از فشردن کلید و رها کردن کلید استفاده کنید و فشار کلید را به صفحه‌های قدیمی واگذارید.

رویدادهای کلید به عنصری می‌رسند که فوکوس دارد: کادر متنی که کاربر رویش کلیک کرده، دکمه‌ای که با Tab به آن رسیده، یا عنصری با ترتیب جهش = 0. بعد مثل کلیک به پدرهای عنصر حباب می‌شوند، پس رویدادگیری که روی یک جعبه‌ی دورش بگذارید کلیدهای هر چیز درونش را می‌شنود. روی خود صفحه نمی‌شود رویدادگیر گذاشت، پس میانبر فقط وقتی کار می‌کند که فوکوس جایی درون عنصری باشد که رویدادگیر دارد.

رویدادگیری که رویداد را می‌خواهد تابع نام‌داری است با یک پارامتر صحیح۶۴، دقیقاً مثل درس رویدادهای ماوس. دام.کلید رویداد(رخداد) کلید را به شکل متن می‌دهد. خاصیت‌های دیگر را با دام.دریافت خاصیت رشته ای و دام.دریافت خاصیت منطقی از رویداد می‌خوانید. نمونه دو تا از مفیدترین‌ها را نشان می‌دهد: code و repeat. روی کادر کلیک کنید، کلیدهای مختلف بزنید، یکی را نگه دارید و ببینید سطرها چطور عوض می‌شوند.

web-keys-echo.salam

واردسازی دام

تابع فشرده(رخداد: صحیح۶۴):
    دام.تنظیم متن(دام.با شناسه("down")، "فشردن کلید: " + دام.کلید رویداد(رخداد) + "، کد " + دام.دریافت خاصیت رشته ای(رخداد، "code"))
    اگر دام.دریافت خاصیت منطقی(رخداد، "repeat"):
        دام.تنظیم متن(دام.با شناسه("note")، "کلید نگه داشته شده و مرورگر آن را تکرار می‌کند.")
    وگرنه:
        دام.تنظیم متن(دام.با شناسه("note")، "")
    پایان
پایان

تابع رهاشده(رخداد: صحیح۶۴):
    دام.تنظیم متن(دام.با شناسه("up")، "رها کردن کلید: " + دام.کلید رویداد(رخداد))
    دام.تنظیم متن(دام.با شناسه("note")، "")
پایان

صفحه:
    عنوان = "کدام کلید؟"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    ورودی: شناسه = "field" فشردن کلید = فشرده رها کردن کلید = رهاشده جانگهدار = "اینجا کلیک کنید و کلیدها را بزنید" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پاراگراف: شناسه = "down" محتوا = "فشردن کلید: هنوز چیزی نشده" خانواده قلم = monospace جهت = ltr پایان
    پاراگراف: شناسه = "up" محتوا = "رها کردن کلید: هنوز چیزی نشده" خانواده قلم = monospace جهت = ltr پایان
    پاراگراف: شناسه = "note" محتوا = "" رنگ = "#b45309" پایان
پایان

key معنای کلید در همین لحظه است: a، A وقتی Shift نگه داشته‌اید، Enter، Escape، Tab، Backspace، فاصله رشته‌ی تک‌نویسه‌ی " " است، و جهت‌نماها ArrowUp، ArrowDown، ArrowLeft و ArrowRight. code می‌گوید کدام کلید فیزیکی بوده، مثلاً KeyA، با هر چیدمانی. وقتی خود نویسه مهم است از key و وقتی جای کلید مهم است، مثل بازی‌ها، از code استفاده کنید. کلیدهای تغییردهنده منطقی‌هایی هستند به نام shiftKey، ctrlKey، altKey و metaKey (Command در مک) که با دام.دریافت خاصیت منطقی(رخداد، "ctrlKey") خوانده می‌شوند.

با چیدمان فارسی، key برای کلیدی که رویش S نوشته شده یک حرف فارسی است، نه s، پس Ctrl+S که به شکل key == "s" نوشته شود هیچ‌وقت جور درنمی‌آید. برای میانبرها code را مقایسه کنید (KeyS) که با چیدمان عوض نمی‌شود. نمونه‌ی میانبر همین کار را می‌کند.

Enter، Escape، جهت‌نماها و میانبرها

بیشتر کاربردهای رویداد کلید یک جدول کوچک است: این کلید آن کار را بکند. اولی فهرست کارهاست. Enter متن کادر را به شکل مورد تازه‌ای که با دام.بساز ساخته شده اضافه می‌کند و کادر را خالی می‌کند. Escape فقط خالی‌اش می‌کند. رویدادگیر پیش از اضافه کردن بررسی می‌کند که کادر خالی نباشد، با دام.دریافت مقدار(کادر).طول() بزرگتر 0.

web-keys-enter.salam

واردسازی دام

تابع نوشتن(رخداد: صحیح۶۴):
    کادر := دام.با شناسه("task")
    کلید := دام.کلید رویداد(رخداد)
    اگر کلید برابر "Enter" و دام.دریافت مقدار(کادر).طول() بزرگتر 0:
        مورد := دام.بساز("li")
        دام.تنظیم متن(مورد، دام.دریافت مقدار(کادر))
        دام.افزودن(دام.با شناسه("list")، مورد)
        دام.تنظیم مقدار(کادر، "")
    وگرنه کلید برابر "Escape":
        دام.تنظیم مقدار(کادر، "")
    پایان
پایان

صفحه:
    عنوان = "فهرست کارها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "28rem" پایان
    ورودی: شناسه = "task" فشردن کلید = نوشتن جانگهدار = "کار تازه، بعد Enter" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پاراگراف: محتوا = "Enter کار را اضافه می‌کند. Escape کادر را خالی می‌کند." رنگ = "#64748b" اندازه قلم = "0.9rem" پایان
    فهرست: شناسه = "list" پایان
پایان

دومی با کلیدهای جهت‌نما یک توپ را می‌چرخاند. جعبه ترتیب جهش = 0 دارد که با Tab به آن می‌رسید و می‌تواند فوکوس بگیرد، پس رویدادهای کلید را می‌گیرد. بدون این ویژگی جعبه هیچ‌وقت آن‌ها را نمی‌گیرد. رویدادگیر هر کلید دیگری را با برگشتن زودهنگام نادیده می‌گیرد و برای جهت‌نماها دام.جلوگیری پیش فرض(رخداد) را صدا می‌زند، چون وگرنه مرورگر صفحه را پیمایش می‌کند. مکان توپ در دو متغیر ناپایا می‌ماند و با دام.تنظیم سبک در left و top نوشته می‌شود.

web-keys-arrows.salam

واردسازی دام

ناپایا ایکس := 120
ناپایا ایگرگ := 60

تابع هدایت(رخداد: صحیح۶۴):
    کلید := دام.کلید رویداد(رخداد)
    اگر کلید برابر "ArrowLeft":
        ایکس -= 12
    وگرنه کلید برابر "ArrowRight":
        ایکس += 12
    وگرنه کلید برابر "ArrowUp":
        ایگرگ -= 12
    وگرنه کلید برابر "ArrowDown":
        ایگرگ += 12
    وگرنه:
        برگشت
    پایان
    دام.جلوگیری پیش فرض(رخداد)
    ایکس = ایکس کوچکتر 0 ? 0 : (ایکس بزرگتر 270 ? 270 : ایکس)
    ایگرگ = ایگرگ کوچکتر 0 ? 0 : (ایگرگ بزرگتر 120 ? 120 : ایگرگ)
    دام.تنظیم سبک(دام.با شناسه("ball")، "left"، ایکس + "px")
    دام.تنظیم سبک(دام.با شناسه("ball")، "top"، ایگرگ + "px")
پایان

صفحه:
    عنوان = "کلیدهای جهت‌نما"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        شناسه = "arena"
        ترتیب جهش = 0
        فشردن کلید = هدایت
        موقعیت = نسبی
        عرض = 300
        ارتفاع = 150
        پس زمینه = "#ecfeff"
        کادر = "2px solid #67e8f9"
        گردی کادر = 10
        جعبه: شناسه = "ball" موقعیت = مطلق چپ = 120 بالا = 60 عرض = 30 ارتفاع = 30 گردی کادر = "50%" پس زمینه = "#0891b2" پایان
    پایان
    پاراگراف: محتوا = "روی جعبه کلیک کنید و بعد با کلیدهای جهت‌نما بچرخانید." پایان
پایان

سومی کلیدهای تغییردهنده را می‌خواند. جعبه‌ای دور یک متن بلند به فشردن کلید هر چیزی که درونش نوشته شود گوش می‌دهد. وقتی Ctrl (یا Command) نگه داشته شده و کلید S است، رویدادگیر کار پیش‌فرض را، که پنجره‌ی ذخیره‌ی خود مرورگر را باز می‌کند، می‌بندد و کار خودش را می‌کند. کار پیش‌فرض میانبری را که خودتان برمی‌دارید همیشه ببندید، و میانبری را که کاربر به آن تکیه دارد، مثل Ctrl+C یا Ctrl+W، هیچ‌وقت برندارید.

web-keys-shortcut.salam

واردسازی دام

تابع میانبر(رخداد: صحیح۶۴):
    کنترل := دام.دریافت خاصیت منطقی(رخداد، "ctrlKey") یا دام.دریافت خاصیت منطقی(رخداد، "metaKey")
    کد := دام.دریافت خاصیت رشته ای(رخداد، "code")
    اگر کنترل و کد برابر "KeyS":
        دام.جلوگیری پیش فرض(رخداد)
        دام.تنظیم متن(دام.با شناسه("status")، "با Ctrl+S ذخیره شد")
    وگرنه کنترل و کد برابر "Enter":
        دام.جلوگیری پیش فرض(رخداد)
        دام.تنظیم متن(دام.با شناسه("status")، "با Ctrl+Enter فرستاده شد")
    پایان
پایان

صفحه:
    عنوان = "میانبرها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        شناسه = "editor"
        فشردن کلید = میانبر
        متن بلند: شناسه = "notes" ردیف‌ها = 5 جانگهدار = "اینجا بنویسید. Ctrl+S و Ctrl+Enter را امتحان کنید." عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پایان
    پاراگراف: شناسه = "status" محتوا = "هنوز چیزی نشده." رنگ = "#047857" پایان
پایان

فوکوس و از دست دادن فوکوس

عنصری فوکوس دارد که کلیدها به آن می‌رسند. فوکوس (focus) وقتی رخ می‌دهد که عنصر فوکوس می‌گیرد، با کلیک، با Tab یا از اسکریپت، و از دست رفتن فوکوس (blur) وقتی که از دست می‌دهد. با هم جای طبیعی راهنمایی‌اند که کنار کادرِ در حال پر شدن ظاهر می‌شود، و برای وارسی کادری وقتی کاربر آن را ترک می‌کند. نمونه‌ی اول هر دو را می‌کند: راهنما با کادر عوض می‌شود و اگر کادر نام را خالی بگذارید قرمز می‌شود.

web-keys-focus.salam

واردسازی دام

تابع راهنما(متن: رشته):
    دام.تنظیم متن(دام.با شناسه("hint")، متن)
پایان

تابع بررسینام:
    اگر دام.دریافت مقدار(دام.با شناسه("name")).طول() برابر 0:
        راهنما("نام را باید بنویسید.")
        دام.تنظیم سبک(دام.با شناسه("name")، "border-color"، "#dc2626")
    وگرنه:
        راهنما("سپاس.")
        دام.تنظیم سبک(دام.با شناسه("name")، "border-color"، "")
    پایان
پایان

صفحه:
    عنوان = "فوکوس و از دست دادن فوکوس"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "input" نمایش = بلوکی عرض = "100%" فاصله = 10 فضا = "0 0 10px 0" اندازه قلم = "1rem" کادر = "2px solid #cbd5e1" گردی کادر = 6 اندازه جعبه = "border-box" پایان
    ورودی: شناسه = "name" جانگهدار = "نام و نام خانوادگی" فوکوس = (): راهنما("نام را همان‌طور که روی کارتتان است بنویسید.") پایان از دست رفتن فوکوس = بررسینام پایان
    ورودی: شناسه = "email" جانگهدار = "رایانامه" فوکوس = (): راهنما("آن را به کسی نمی‌دهیم.") پایان از دست رفتن فوکوس = (): راهنما("") پایان پایان
    پاراگراف: شناسه = "hint" محتوا = "روی یکی از کادرها کلیک کنید." رنگ = "#475569" پایان
پایان

فوکوس و از دست رفتن فوکوس حباب نمی‌شوند، پس رویدادگیر یک جعبه‌ی دورشان هیچ‌وقت آن‌ها را از کادرهای درون نمی‌شنود. دو خواهرشان، ورود فوکوس (focusin) و خروج فوکوس (focusout)، حباب می‌شوند، پس یک رویدادگیر روی بخشی از فرم یا یک کارت می‌تواند فوکوس همه‌ی چیزهای درونش را دنبال کند. راه سبک‌دادن به یک گروه بر پایه‌ی چیزی که درونش است هم همین‌هاست. CSS هم با انتخابگر :focus-within این کار را می‌کند و جایی که می‌شود باید از آن استفاده کنید.

web-keys-focusin.salam

واردسازی دام

صفحه:
    عنوان = "گروهی که فوکوس را دنبال می‌کند"
    ظاهر سفارشی: محتوا = "#group.active { border-color: #2563eb; background: #eff6ff }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "input" نمایش = بلوکی عرض = "100%" فاصله = 8 فضا = "6px 0" اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    جعبه:
        شناسه = "group"
        ورود فوکوس = (): دام.افزودن کلاس(دام.با شناسه("group")، "active") پایان
        خروج فوکوس = (): دام.حذف کلاس(دام.با شناسه("group")، "active") پایان
        فاصله = 14
        کادر = "2px solid #cbd5e1"
        گردی کادر = 10
        گذار = "background 0.2s"
        پاراگراف: محتوا = "نشانی تحویل" وزن قلم = "bold" فضا = 0 پایان
        ورودی: شناسه = "street" جانگهدار = "خیابان" پایان
        ورودی: شناسه = "city" جانگهدار = "شهر" پایان
    پایان
پایان

گروه برای هر رویداد یک رویدادگیر دارد. ورود فوکوس کلاسی را اضافه می‌کند که کادر آبی را می‌کشد و خروج فوکوس آن را برمی‌دارد. وقتی با Tab از یک کادر به کادر بعدی می‌روید، خروج فوکوس و ورود فوکوس پشت سر هم و پیش از آنکه مرورگر چیزی بکشد می‌رسند، پس کادر چشمک نمی‌زند. درون رویدادگیر خروج فوکوس، event.relatedTarget عنصری است که فوکوس بعد از این به آن می‌رسد، اگر بخواهید ترک گروه را از جابه‌جایی درونش جدا کنید.

نوشتن در کادر: ورودی، تغییر و پیش از ورودی

کادر متن برای یک کار چند رویداد دارد و فرقشان لحظه است. ورودی (input) بعد از هر تغییر مقدار رخ می‌دهد: حرفی که نوشته شد، پاک شد، چسبانده شد، رها شد یا برگشت خورد. تغییر (change) وقتی رخ می‌دهد که کاربر کارش را تمام کرده: Enter در کادر تک‌سطری، یا از دست رفتن فوکوس بعد از عوض شدن مقدار. پیش از ورودی (beforeinput) اول رخ می‌دهد، پیش از اینکه مقدار عوض شود، و رویدادگیرش می‌تواند preventDefault صدا بزند و ویرایش را نپذیرد. در کادر زیر بنویسید و Enter بزنید، بعد باز هم بنویسید و بیرون کلیک کنید، و دو شمارنده را مقایسه کنید.

web-keys-input.salam

واردسازی دام

ناپایا ورودیها := 0
ناپایا تغییرها := 0

تابع نوشتن:
    دام.تنظیم متن(دام.با شناسه("counts")، "ورودی " + ورودیها + " بار رخ داد، تغییر " + تغییرها + " بار رخ داد")
پایان

صفحه:
    عنوان = "ورودی و تغییر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    ورودی: شناسه = "field" ورودی = (): ورودیها += 1 نوشتن() پایان تغییر = (): تغییرها += 1 نوشتن() پایان جانگهدار = "بنویسید، بعد Enter بزنید یا بیرون کلیک کنید" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پاراگراف: شناسه = "counts" محتوا = "ورودی 0 بار رخ داد، تغییر 0 بار رخ داد" پایان
    پاراگراف: محتوا = "ورودی هر ضربه‌ی کلید را دنبال می‌کند. تغییر صبر می‌کند تا کارتان تمام شود." رنگ = "#64748b" پایان
پایان

رویدادگیر ورودی چیزی است که ویژگی‌های زنده از آن ساخته می‌شوند. شمارنده‌ی نویسه نشان می‌دهد چقدر مانده است. با گذاشتن بیشینه طول روی متن بلند، مرورگر خودش در حد مجاز جلوی نوشتن را می‌گیرد و شمارنده فقط باید طول را نشان دهد. نزدیک پایان قرمز می‌شود.

web-keys-counter.salam

واردسازی دام

تابع شمارش:
    تعداد := دام.دریافت مقدار(دام.با شناسه("msg")).طول()
    باقی := دام.با شناسه("left")
    دام.تنظیم متن(باقی، تعداد + " / 80")
    اگر تعداد بزرگتربرابر 70:
        دام.تنظیم سبک(باقی، "color"، "#b91c1c")
    وگرنه:
        دام.تنظیم سبک(باقی، "color"، "#475569")
    پایان
پایان

صفحه:
    عنوان = "شمارنده‌ی نویسه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    متن بلند: شناسه = "msg" ورودی = شمارش بیشینه طول = 80 ردیف‌ها = 3 جانگهدار = "یک پیام کوتاه" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پاراگراف: شناسه = "left" محتوا = "0 / 80" ترازمتن = چپ فضا = "4px 0" جهت = ltr پایان
پایان

کادر جست‌وجو فهرستی را با هر ضربه پالایش می‌کند. رویدادگیر کادر را می‌خواند و موردهایی را که دام.پرسمان همه پیدا کرده می‌گردد: به موردی که جور است display رشته‌ی خالی می‌دهد که ظاهر عادی‌اش را برمی‌گرداند، و به بقیه none. متن خالی با همه جور است، پس با پاک کردن کادر همه‌ی موردها برمی‌گردند و کد اضافه لازم نیست.

web-keys-filter.salam

واردسازی دام

تابع پالایش:
    عبارت := دام.دریافت مقدار(دام.با شناسه("q"))
    موردها := دام.پرسمان همه("#fruits li")
    تکرار دام.تعداد(موردها) در شماره:
        مورد := دام.عنصر شماره(موردها، شماره)
        اگر دام.دریافت متن(مورد).دربردارد(عبارت):
            دام.تنظیم سبک(مورد، "display"، "")
        وگرنه:
            دام.تنظیم سبک(مورد، "display"، "none")
        پایان
    پایان
پایان

صفحه:
    عنوان = "جست‌وجوی زنده"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    ورودی: شناسه = "q" ورودی = پالایش جانگهدار = "جست‌وجوی میوه" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    فهرست: شناسه = "fruits"
        مورد: محتوا = "سیب" پایان
        مورد: محتوا = "موز" پایان
        مورد: محتوا = "آلبالو" پایان
        مورد: محتوا = "انبه" پایان
        مورد: محتوا = "پرتقال" پایان
        مورد: محتوا = "گلابی" پایان
    پایان
پایان

حلقه برای شمار موردها از دام.تعداد و برای هر مورد از دام.عنصر شماره استفاده می‌کند. پرسمان همه عنصرهایی را می‌دهد که همان لحظه هستند، پس اگر ممکن است موردهای تازه اضافه شوند، آن را درون رویدادگیر صدا بزنید، مثل اینجا، نه یک بار در آغاز.

انتخاب متن

سه رویداد انتخاب را گزارش می‌کنند. انتخاب (select) وقتی رخ می‌دهد که کاربر بخشی از متن یک کادر را انتخاب می‌کند، و نه برای جابه‌جایی ساده‌ی مکان‌نما. تغییر انتخاب (selectionchange) هر بار رخ می‌دهد که انتخاب یا مکان‌نما در کادر عوض شود، پس موقع جابه‌جا شدن مکان‌نما هم می‌آید. شروع انتخاب (selectstart) وقتی رخ می‌دهد که انتخاب تازه‌ای در هر عنصری شروع شود، حتی عنصری که ویرایش‌شدنی نیست، و رویدادگیر می‌تواند preventDefault صدا بزند و انتخاب را ممنوع کند. مکان‌ها خاصیت‌های selectionStart و selectionEnd کادر هستند که با دام.دریافت خاصیت عددی خوانده می‌شوند.

web-keys-select.salam

واردسازی دام

تابع انتخابشد:
    کادر := دام.با شناسه("text")
    الف := دام.دریافت خاصیت عددی(کادر، "selectionStart") برگردان صحیح۶۴
    ب := دام.دریافت خاصیت عددی(کادر، "selectionEnd") برگردان صحیح۶۴
    دام.تنظیم متن(دام.با شناسه("sel")، "انتخاب: " + (ب - الف) + " نویسه، از " + الف + " تا " + ب)
پایان

تابع مکاننما:
    جا := دام.دریافت خاصیت عددی(دام.با شناسه("text")، "selectionStart") برگردان صحیح۶۴
    دام.تنظیم متن(دام.با شناسه("caret")، "تغییر انتخاب: مکان‌نما در " + جا)
پایان

تابع شروعشد:
    دام.تنظیم متن(دام.با شناسه("start")، "شروع انتخاب: انتخاب تازه‌ای در این پاراگراف آغاز شد.")
پایان

صفحه:
    عنوان = "انتخاب متن"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    متن بلند: شناسه = "text" انتخاب = انتخابشد تغییر انتخاب = مکاننما ردیف‌ها = 3 محتوا = "بخشی از این کلمه‌ها را با ماوس یا با Shift و کلیدهای جهت‌نما انتخاب کنید." عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پاراگراف: شناسه = "sel" محتوا = "انتخاب: چیزی انتخاب نشده" پایان
    پاراگراف: شناسه = "caret" محتوا = "تغییر انتخاب: هنوز مکان‌نمایی نیست" پایان
    پاراگراف: شناسه = "para" شروع انتخاب = شروعشد محتوا = "این پاراگراف را هم می‌توانید انتخاب کنید." پس زمینه = "#fef9c3" فاصله = 8 پایان
    پاراگراف: شناسه = "start" محتوا = "شروع انتخاب: هنوز چیزی نشده" پایان
پایان

با ماوس انتخاب کنید یا Shift را نگه دارید و جهت‌نماها را بزنید. سطرهای زیر کادر شمار نویسه‌ها و مکان مکان‌نما را نشان می‌دهند و پاراگراف زرد گزارش می‌دهد که انتخابی در آن شروع شده است. پشتیبانی از تغییر انتخاب روی خود کادر متن از دو رویداد دیگر تازه‌تر است. ممکن است مرورگری آن را فقط به سند بفرستد، پس آن را در مرورگرهایی که برایتان مهم‌اند امتحان کنید.

ارسال، بازنشانی و داده‌ی فرم

فرم وقتی ارسال (submit) می‌فرستد که کاربر دکمه‌ی ارسال را بزند یا در یکی از کادرها Enter بزند و بررسی‌های خود مرورگر گذشته باشد. اگر کاری نکنید مرورگر کادرها را به کارساز می‌فرستد و پاسخ را بارگذاری می‌کند. صفحه‌ای که خودش فرم را اداره می‌کند اول دام.جلوگیری پیش فرض(رخداد) را صدا می‌زند و بعد کادرها را با دام.دریافت مقدار می‌خواند. رویدادگیر را روی فرم بگذارید، نه روی دکمه، چون Enter در کادر بدون زدن دکمه هم ارسال می‌کند. رویداد بازنشانی (reset) وقتی رخ می‌دهد که دکمه‌ی بازنشانی زده شود یا فرم با اسکریپت بازنشانی شود، درست پیش از اینکه کادرها به مقدار اول برگردند.

web-keys-submit.salam

واردسازی دام

تابع ارسالفرم(رخداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رخداد)
    کی := دام.دریافت مقدار(دام.با شناسه("who"))
    نشانی := دام.دریافت مقدار(دام.با شناسه("mail"))
    دام.تنظیم متن(دام.با شناسه("result")، "سپاس، " + کی + ". به " + نشانی + " می‌نویسیم.")
پایان

تابع خالیشد:
    دام.تنظیم متن(دام.با شناسه("result")، "فرم خالی شد.")
پایان

صفحه:
    عنوان = "ثبت نام"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "input" نمایش = بلوکی عرض = "100%" فاصله = 10 فضا = "0 0 10px 0" اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "button" فاصله = "8px 16px" فضا = "0 0 0 8px" اندازه قلم = "1rem" پایان
    فرم:
        شناسه = "signup"
        ارسال = ارسالفرم
        بازنشانی = خالیشد
        ورودی: شناسه = "who" جانگهدار = "نام شما" پایان
        ورودی: شناسه = "mail" نوع = email جانگهدار = "رایانامه‌ی شما" پایان
        دکمه: شناسه = "go" نوع = submit محتوا = "ثبت نام" پایان
        دکمه: شناسه = "clear" نوع = reset محتوا = "پاک کردن" پایان
    پایان
    پاراگراف: شناسه = "result" محتوا = "" رنگ = "#047857" پایان
پایان

برای کادرها و دکمه‌هایتان شناسه‌هایی بگذارید که با نام تابع‌هایتان فرق داشته باشد. درون یک فرم مرورگر نام را اول میان کادرها و دکمه‌های فرم پیدا می‌کند، پس دکمه‌ای با شناسه = "send" تابعی به نام send را پنهان می‌کند و رویدادگیر خطای «تابع نیست» می‌دهد.

رویداد سوم فرم داده فرم (formdata) است. هر بار که مرورگر فهرست کادرهای یک فرم را می‌سازد رخ می‌دهد، که ارسال هم این کار را می‌کند و اسکریپتی که new FormData(form) بنویسد هم. رویدادگیر event.formData را می‌گیرد و می‌تواند پیش از استفاده چیزی اضافه یا عوض کند. نمونه وقتی دکمه داده را می‌سازد یک کادر پنهان اضافه می‌کند.

web-keys-formdata.salam

واردسازی دام

تابع افزودنی(رخداد: صحیح۶۴):
    داده := دام.دریافت خاصیت(رخداد، "formData")
    _ر := دام.فراخوان رشته دو(داده، "append"، "source"، "newsletter")
    دام.تنظیم متن(دام.با شناسه("out")، "داده‌ی فرم: فرم یک فیلد پنهان به نام source اضافه کرد.")
پایان

صفحه:
    عنوان = "داده‌ی فرم"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    فرم:
        شناسه = "news"
        داده فرم = افزودنی
        ورودی: نام = "email" مقدار = "[email protected]" فاصله = 10 اندازه قلم = "1rem" جهت = ltr پایان
        دکمه: شناسه = "build" نوع = button کلیک = "new FormData(document.getElementById('news'))" محتوا = "ساختن داده‌ی فرم" فاصله = "8px 16px" فضا = "0 8px 0 0" پایان
    پایان
    پاراگراف: شناسه = "out" محتوا = "هنوز چیزی ساخته نشده." پایان
پایان

دکمه رشته‌ی کوتاهی از جاوااسکریپت دارد، چون کمک‌تابع‌های دام راهی برای نوشتن new ندارند. رویدادگیر تابع عادی سلام است: دام.دریافت خاصیت(رخداد، "formData") شیء FormData را می‌دهد و دام.فراخوان رشته دو متد append آن را با یک نام و یک مقدار صدا می‌زند.

وارسی کادرها: نامعتبر

HTML می‌تواند بدون یک سطر اسکریپت کادرها را وارسی کند: الزامی (required)، نوع = email، min، max، pattern و بیشینه طول همه سهم دارند. وقتی مرورگر کادری را وارسی می‌کند و رد می‌شود، کادر رویداد نامعتبر (invalid) می‌گیرد. وارسی وقتی انجام می‌شود که فرم ارسال شود، و همچنین وقتی اسکریپتی checkValidity() یا reportValidity() را روی فرم یا کادر صدا بزند. دومی حباب مرورگر را هم با پیام نشان می‌دهد. نامعتبر حباب نمی‌شود، پس رویدادگیر باید روی خود کادر باشد.

رویدادگیر زیر با صدا زدن setCustomValidity روی کادر پیام مرورگر را با پیام خودش عوض می‌کند. به شیء validity کادر نگاه می‌کند تا کادر خالی را از کادر نادرست تشخیص دهد. پیام تا وقتی برندارید روی کادر می‌ماند، پس رویدادگیر دیگری روی ورودی هر بار که کاربر می‌نویسد آن را به رشته‌ی خالی برمی‌گرداند. اگر این را فراموش کنید کادر برای همیشه نامعتبر می‌ماند، حتی بعد از اینکه کاربر درستش کرده.

web-keys-validate.salam

واردسازی دام

تابع توضیح(رخداد: صحیح۶۴):
    کادر := دام.هدف رویداد(رخداد)
    اگر دام.دریافت خاصیت منطقی(دام.دریافت خاصیت(کادر، "validity")، "valueMissing"):
        _الف := دام.فراخوان رشته یک(کادر، "setCustomValidity"، "لطفاً رایانامه‌تان را بنویسید.")
    وگرنه:
        _ب := دام.فراخوان رشته یک(کادر، "setCustomValidity"، "این شبیه نشانی رایانامه نیست.")
    پایان
    دام.تنظیم متن(دام.با شناسه("why")، "نامعتبر: " + دام.دریافت خاصیت رشته ای(کادر، "validationMessage"))
پایان

تابع دوباره:
    _پ := دام.فراخوان رشته یک(دام.با شناسه("mail")، "setCustomValidity"، "")
پایان

تابع وارسی:
    _ت := دام.فراخوان(دام.با شناسه("form")، "reportValidity")
    اگر دام.دریافت خاصیت منطقی(دام.دریافت خاصیت(دام.با شناسه("mail")، "validity")، "valid"):
        دام.تنظیم متن(دام.با شناسه("why")، "نشانی درست است.")
    پایان
پایان

صفحه:
    عنوان = "پیام‌های دلخواه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    فرم:
        شناسه = "form"
        ورودی: شناسه = "mail" نوع = email الزامی = درست نامعتبر = توضیح ورودی = دوباره جانگهدار = "رایانامه‌ی شما" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
        دکمه: شناسه = "recheck" نوع = button کلیک = وارسی محتوا = "وارسی" فضا = "10px 0 0 0" فاصله = "8px 16px" پایان
    پایان
    پاراگراف: شناسه = "why" محتوا = "وارسی را بزنید." پایان
پایان

وارسی در مرورگر کمک به کاربر است، نه حفاظت. هر کسی می‌تواند درخواستی با هر مقداری بفرستد، پس کارساز باید همه‌چیز را دوباره بسنجد.

رونوشت، برش و چسباندن

سه رویداد حافظه‌ی موقت وقتی رخ می‌دهند که کاربر با صفحه‌کلید یا منو رونوشت بگیرد، ببرد یا بچسباند. روی عنصری رخ می‌دهند که انتخاب یا فوکوس را دارد و حباب می‌شوند. رونوشت و برش پیش از کار خود مرورگر اجرا می‌شوند، پس رویدادگیر می‌تواند preventDefault صدا بزند و با clipboardData.setData متن خودش را در حافظه‌ی موقت بگذارد. چسباندن محتوای چسبانده‌شده را در event.clipboardData می‌دهد و getData("text") متن ساده است. رویدادگیر می‌تواند کار پیش‌فرض را ببندد و نسخه‌ی پاک‌شده‌ای را درج کند. صفحه در هیچ لحظه‌ی دیگری بدون اجازه‌ی کاربر نمی‌تواند حافظه‌ی موقت را بخواند، و این عمدی است.

web-keys-clipboard.salam

واردسازی دام

ناپایا رونوشتها := 0
ناپایا برشها := 0

تابع آمار:
    دام.تنظیم متن(دام.با شناسه("stats")، "رونوشت " + رونوشتها + " بار، برش " + برشها + " بار")
پایان

تابع رونوشتشده:
    رونوشتها += 1
    آمار()
پایان

تابع بریده:
    برشها += 1
    آمار()
پایان

تابع چسبانده(رخداد: صحیح۶۴):
    متن := دام.فراخوان رشته یک(دام.دریافت خاصیت(رخداد، "clipboardData")، "getData"، "text")
    دام.تنظیم خاصیت(دام.با شناسه("last")، "textContent"، متن)
پایان

صفحه:
    عنوان = "حافظه‌ی موقت"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    ورودی: شناسه = "field" رونوشت = رونوشتشده برش = بریده چسباندن = چسبانده مقدار = "در این کادر رونوشت، برش یا چسباندن را امتحان کنید" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" پایان
    پاراگراف: شناسه = "stats" محتوا = "رونوشت 0 بار، برش 0 بار" پایان
    پاراگراف:
        محتوا = "آخرین متن چسبانده‌شده: "
        تکه: شناسه = "last" محتوا = "هیچ" وزن قلم = "bold" پایان
    پایان
پایان

رویدادگیر چسباندن رشته را بدون دست زدن به صفحه می‌دهد: دام.فراخوان رشته یک آن را به شکل یک مقدار جاوااسکریپت برمی‌گرداند و دام.تنظیم خاصیت با آن textContent تکه را می‌نویسد. در کادر با Ctrl+A همه را انتخاب کنید، بعد رونوشت بگیرید، ببرید و بچسبانید و شمارنده‌ها و سطر آخر را ببینید.

جزئیات، واشو، پنجره‌ی گفتگو و جست‌وجو در صفحه

بعضی عنصرها خودشان باز و بسته می‌شوند و برایش رویداد دارند. تغییر حالت (toggle) روی عنصر جزئیات بعد از باز یا بسته شدن آن رخ می‌دهد، و روی عنصری که ویژگی واشو (popover) دارد بعد از نشان داده یا پنهان شدنش. رویداد واشو newState دارد که متن open یا closed است. رویداد کمی بعد از تغییر می‌آید، نه همزمان. پیش از تغییر حالت (beforetoggle) اول رخ می‌دهد، لغوشدنی است و برای واشو (و در مرورگرهای تازه‌تر برای پنجره‌ی گفتگو) هست. نمونه‌ی زیر حالتی را که قرار است شروع شود، یعنی newState، پیش از تغییر واشو نشان می‌دهد و حالتی را که به آن رسیده بعد از تغییر.

web-keys-toggle.salam

واردسازی دام

تابع بازشد:
    اگر دام.دریافت خاصیت منطقی(دام.با شناسه("more")، "open"):
        دام.تنظیم متن(دام.با شناسه("dstate")، "جزئیات باز است.")
    وگرنه:
        دام.تنظیم متن(دام.با شناسه("dstate")، "جزئیات بسته است.")
    پایان
پایان

تابع واشد(رخداد: صحیح۶۴):
    دام.تنظیم متن(دام.با شناسه("pstate")، "حالت تازه‌ی واشو: " + دام.دریافت خاصیت رشته ای(رخداد، "newState"))
پایان

تابع درشرف(رخداد: صحیح۶۴):
    دام.تنظیم متن(دام.با شناسه("before")، "پیش از تغییر حالت: در شرف " + دام.دریافت خاصیت رشته ای(رخداد، "newState"))
پایان

صفحه:
    عنوان = "تغییر حالت"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جزئیات:
        شناسه = "more"
        تغییر حالت = بازشد
        خلاصه: محتوا = "بیشتر درباره‌ی سلام" پایان
        پاراگراف: محتوا = "سلام زبانی برای وب و برای برنامه‌هاست." پایان
    پایان
    پاراگراف: شناسه = "dstate" محتوا = "جزئیات بسته است." پایان
    دکمه: هدف واشو = "tip" محتوا = "نمایش یک نکته" فاصله = "8px 16px" پایان
    جعبه: شناسه = "tip" واشو = auto پیش از تغییر حالت = درشرف تغییر حالت = واشد محتوا = "با زدن Escape نکته بسته می‌شود." فاصله = 14 گردی کادر = 8 پایان
    پاراگراف: شناسه = "before" محتوا = "هنوز واشویی نشده." پایان
    پاراگراف: شناسه = "pstate" محتوا = "" پایان
پایان

پنجره گفتگو (dialog) که با showModal() باز شود روی صفحه نشان داده می‌شود و تا بسته شدن هر چه پشتش است را قفل می‌کند. دام.فراخوان(پنجره، "showModal") بازش می‌کند. وقتی کاربر Escape می‌زند پنجره انصراف (cancel) می‌فرستد که با جلوگیری از آن می‌شود پنجره را باز نگه داشت، و بعد بسته می‌شود و بسته شدن (close) می‌فرستد. پنجره‌ای که با کد بسته شود، مثلاً با دام.فراخوان رشته یک(پنجره، "close"، "deleted")، فقط بسته شدن می‌فرستد و متنی که دادید returnValue آن است.

web-keys-dialog.salam

واردسازی دام

تابع بازکردن:
    دام.تنظیم متن(دام.با شناسه("log")، "پنجره باز است.")
    _ر := دام.فراخوان(دام.با شناسه("dlg")، "showModal")
پایان

تابع انصرافداد:
    دام.تنظیم متن(دام.با شناسه("log")، "انصراف رخ داد (Escape زده شد).")
پایان

تابع بستهشد:
    دام.تنظیم متن(دام.با شناسه("end")، "بسته شدن رخ داد، مقدار برگشتی: " + دام.دریافت خاصیت رشته ای(دام.با شناسه("dlg")، "returnValue"))
پایان

تابع تاییدحذف:
    _ر := دام.فراخوان رشته یک(دام.با شناسه("dlg")، "close"، "deleted")
پایان

صفحه:
    عنوان = "پنجره‌ی گفتگو"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    دکمه: شناسه = "open" کلیک = بازکردن محتوا = "حذف پرونده" فاصله = "8px 16px" پایان
    پنجره گفتگو:
        شناسه = "dlg"
        انصراف = انصرافداد
        بسته شدن = بستهشد
        پاراگراف: محتوا = "این پرونده برای همیشه حذف شود؟" پایان
        دکمه: شناسه = "yes" کلیک = تاییدحذف محتوا = "حذف" فاصله = "6px 14px" پایان
    پایان
    پاراگراف: شناسه = "log" محتوا = "هنوز چیزی نشده." پایان
    پاراگراف: شناسه = "end" محتوا = "" پایان
پایان

آخرین رویداد پیش از تطبیق (beforematch) است. عنصری با پنهان = "until-found" کشیده نمی‌شود، ولی متنش قابل جست‌وجو می‌ماند. وقتی کاربر آن را با جست‌وجوی مرورگر پیدا کند یا پیوندی به شناسه‌اش را باز کند، مرورگر آن را نشان می‌دهد و درست پیش از آن پیش از تطبیق می‌فرستد. رویدادگیر می‌تواند بخش دورش را، مثلاً یک آکاردئون بسته، باز کند تا نتیجه دیده شود. در نمونه Ctrl+F بزنید و «انار» را پیدا کنید، یا صفحه را با #secret در پایان نشانی باز کنید. هنوز همه‌ی مرورگرها آن را پشتیبانی نمی‌کنند؛ در آن‌ها متن تا وقتی اسکریپتی نشانش ندهد پنهان می‌ماند. Chrome با اینکه این رویداد را می‌فرستد، ویژگی درون‌خطی onbeforematch را اجرا نمی‌کند، پس همین یک رویداد را با اسکریپت سفارشی و addEventListener ثبت می‌کنیم، همان‌طور که نمونه می‌کند. ویژگی پیش از تطبیق همان شکلی است که استاندارد تعریف می‌کند، و در مرورگری که آن را بپذیرد می‌توانید به جای اسکریپت از آن استفاده کنید.

web-keys-match.salam

صفحه:
    عنوان = "جست‌وجو در صفحه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: شناسه = "state" محتوا = "متن زیر تا وقتی مرورگر آن را پیدا نکند پنهان می‌ماند." پایان
    جعبه: شناسه = "secret" پنهان = "until-found" محتوا = "کلمه‌ی رمز انار است." فاصله = 14 پس زمینه = "#fef3c7" گردی کادر = 8 پایان
    اسکریپت سفارشی: محتوا = "document.getElementById('secret').addEventListener('beforematch', function () { document.getElementById('state').textContent = 'پیش از تطبیق رخ داد: مرورگر دارد متن را نشان می‌دهد'; });" پایان
پایان

مرجع: همه‌ی رویدادهای صفحه‌کلید و فرم

هر سطر ویژگی، ویژگی HTML که از آن ساخته می‌شود و زمان رخ دادنش را می‌دهد. نمونه‌ها را مترجم وارسی کرده است. رویدادهایی که خود شیء رویداد را لازم دارند در این نمونه‌های کوچک رشته‌ی جاوااسکریپت دارند. نمونه‌ی پیش از تطبیق به دلیلی که در بخش آخر آمد اسکریپت سفارشی دارد.

ویژگی	چه وقت رخ می‌دهد	نمونه
`فشردن کلید` key down onkeydown	وقتی کلیدی روی عنصر فوکوس‌دار پایین می‌رود رخ می‌دهد، و تا وقتی کلید نگه داشته شود برای هر تکرار دوباره (که `repeat` درست است). `دام.کلید رویداد(رخداد)` کلید است، مثل `a`، `Enter` یا `ArrowUp`.	`ورودی: فشردن کلید = (): دام.تنظیم متن(دام.با شناسه("out")، "کلیدی فشرده شد") پایان جانگهدار = "اینجا کلیدی بزنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`رها کردن کلید` key up onkeyup	وقتی کلید دوباره بالا می‌آید رخ می‌دهد. برای هر فشار دقیقاً یک بار رخ می‌دهد، هر قدر هم کلید نگه داشته شده باشد.	`ورودی: رها کردن کلید = (): دام.تنظیم متن(دام.با شناسه("out")، "کلیدی رها شد") پایان جانگهدار = "کلیدی بزنید و رها کنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`فشار کلید` key press onkeypress	منسوخ شده. بعد از `فشردن کلید` برای کلیدهایی رخ می‌دهد که نویسه می‌سازند، و برای Escape یا جهت‌نماها نه. در کد تازه از `فشردن کلید` استفاده کنید.	`ورودی: فشار کلید = (): دام.تنظیم متن(دام.با شناسه("out")، "کلید نویسه‌ای فشرده شد") پایان جانگهدار = "یک حرف بنویسید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`فوکوس` focus onfocus	وقتی عنصر با کلیک، کلید Tab یا اسکریپت فوکوس می‌گیرد رخ می‌دهد. حباب نمی‌شود؛ نسخه‌ی حباب‌شونده‌اش `ورود فوکوس` است.	`ورودی: فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "کادر فوکوس دارد") پایان جانگهدار = "کلیک کنید یا با Tab بیایید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`از دست رفتن فوکوس` blur onblur	وقتی عنصر فوکوس را از دست می‌دهد رخ می‌دهد. لحظه‌ی خوبی برای وارسی چیزی است که کاربر نوشته. حباب نمی‌شود.	`ورودی: از دست رفتن فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "کادر فوکوس را از دست داد") پایان جانگهدار = "کلیک کنید، بعد بیرون کلیک کنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`ورود فوکوس` focus in onfocusin	مثل `فوکوس` ولی حباب می‌شود، پس یک رویدادگیر روی گروه فوکوس همه‌ی کادرهای درون را می‌شنود.	`جعبه: ورود فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "فوکوس درون گروه است") پایان ورودی: جانگهدار = "اول" پایان ورودی: جانگهدار = "دوم" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`خروج فوکوس` focus out onfocusout	مثل `از دست رفتن فوکوس` ولی حباب می‌شود. `event.relatedTarget` عنصری است که فوکوس بعد از این به آن می‌رسد و با آن می‌توانید ترک گروه را از جابه‌جایی درون گروه جدا کنید.	`جعبه: خروج فوکوس = (): دام.تنظیم متن(دام.با شناسه("out")، "فوکوس از یکی از کادرهای گروه رفت") پایان ورودی: جانگهدار = "اول" پایان ورودی: جانگهدار = "دوم" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`ورودی` input oninput	بعد از هر تغییر مقدار کادر رخ می‌دهد: نوشتن، پاک کردن، چسباندن، رها کردن، برگشت دادن. رویداد درست برای ویژگی‌های زنده مثل شمارنده و پالایش است.	`ورودی: شناسه = "box" ورودی = (): دام.تنظیم متن(دام.با شناسه("out")، "نوشته‌اید: " + دام.دریافت مقدار(دام.با شناسه("box")).طول() + " نویسه") پایان جانگهدار = "اینجا بنویسید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`پیش از ورودی` before input onbeforeinput	پیش از عوض شدن مقدار رخ می‌دهد و می‌شود لغوش کرد، که ویرایش را نمی‌پذیرد. `event.data` متنی است که قرار است درج شود.	`ورودی: پیش از ورودی = "if (event.data === ' ') { event.preventDefault(); }" جانگهدار = "فاصله مجاز نیست" پایان`
`تغییر` change onchange	وقتی کاربر تغییری را تمام کرده رخ می‌دهد: Enter در کادر تک‌سطری، یا از دست رفتن فوکوس بعد از عوض شدن مقدار. برای چک‌باکس، دکمه‌ی رادیویی و فهرست‌ها همان لحظه رخ می‌دهد.	`ورودی: تغییر = (): دام.تنظیم متن(دام.با شناسه("out")، "مقدار ثبت شد") پایان جانگهدار = "بنویسید، بعد بیرون کلیک کنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`انتخاب` select onselect	وقتی کاربر بخشی از متن یک کادر را انتخاب می‌کند رخ می‌دهد. بازه در خاصیت‌های `selectionStart` و `selectionEnd` است.	`ورودی: انتخاب = (): دام.تنظیم متن(دام.با شناسه("out")، "بخشی از متن انتخاب شد") پایان مقدار = "بخشی از این متن را انتخاب کنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر انتخاب` selection change onselectionchange	وقتی انتخاب یا مکان‌نما در کادر متن عوض می‌شود رخ می‌دهد. پشتیبانی روی خود کادر تازه‌تر است و بعضی مرورگرها آن را فقط به سند می‌فرستند.	`متن بلند: تغییر انتخاب = (): دام.تنظیم متن(دام.با شناسه("out")، "مکان‌نما جابه‌جا شد") پایان محتوا = "درون این متن کلیک کنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`شروع انتخاب` select start onselectstart	وقتی کاربر انتخاب تازه‌ای شروع می‌کند رخ می‌دهد، در هر عنصری، ویرایش‌شدنی یا نه. می‌شود لغوش کرد تا انتخاب ممنوع شود.	`پاراگراف: شروع انتخاب = (): دام.تنظیم متن(دام.با شناسه("out")، "انتخابی شروع شد") پایان محتوا = "بخشی از این متن را انتخاب کنید." پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`ارسال` submit onsubmit	وقتی فرم با دکمه‌ی ارسال یا Enter در یک کادر ارسال می‌شود رخ می‌دهد، بعد از اینکه بررسی‌های مرورگر گذشته باشد. `دام.جلوگیری پیش فرض(رخداد)` جلوی فرستادن فرم و بارگذاری صفحه‌ی تازه را می‌گیرد.	`فرم: ارسال = "event.preventDefault(); document.getElementById('out').textContent = 'فرستاده شد: ' + this.elements.name.value" ورودی: نام = "name" مقدار = "سارا" پایان دکمه: محتوا = "ارسال" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بازنشانی` reset onreset	وقتی فرم بازنشانی می‌شود رخ می‌دهد، با دکمه‌ی بازنشانی یا `form.reset()`، درست پیش از اینکه کادرها به مقدار اول برگردند. لغوشدنی است.	`فرم: بازنشانی = (): دام.تنظیم متن(دام.با شناسه("out")، "فرم بازنشانی شد") پایان ورودی: مقدار = "مرا عوض کنید" پایان دکمه: نوع = reset محتوا = "بازنشانی" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`نامعتبر` invalid oninvalid	روی کادری رخ می‌دهد که در بررسی‌های مرورگر (`required`، `type = email`، `pattern` و ...) رد می‌شود، وقتی فرم ارسال شود یا `checkValidity()` یا `reportValidity()` صدا زده شود. حباب نمی‌شود، پس روی خود کادر می‌گذاریدش.	`فرم: ورودی: الزامی = درست نامعتبر = (): دام.تنظیم متن(دام.با شناسه("out")، "این کادر الزامی است") پایان جانگهدار = "الزامی" پایان دکمه: نوع = button کلیک = "this.form.reportValidity()" محتوا = "وارسی" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`داده فرم` form data onformdata	هر بار که مرورگر فهرست کادرهای فرم را می‌سازد روی فرم رخ می‌دهد: در ارسال، و در `new FormData(form)`. پیش از استفاده می‌شود `event.formData` را عوض کرد.	`فرم: شناسه = "f" داده فرم = (): دام.تنظیم متن(دام.با شناسه("out")، "داده‌ی فرم ساخته شد") پایان ورودی: نام = "q" مقدار = "x" پایان دکمه: نوع = button کلیک = "new FormData(document.getElementById('f'))" محتوا = "ساختن" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`رونوشت` copy oncopy	وقتی کاربر رونوشت می‌گیرد رخ می‌دهد. رویدادگیر می‌تواند `preventDefault` صدا بزند و با `clipboardData.setData` متن خودش را در حافظه‌ی موقت بگذارد.	`ورودی: رونوشت = (): دام.تنظیم متن(دام.با شناسه("out")، "رونوشت گرفته شد") پایان مقدار = "مرا انتخاب کنید و Ctrl+C بزنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`برش` cut oncut	وقتی کاربر انتخاب را می‌برد رخ می‌دهد، پیش از برداشته شدن متن.	`ورودی: برش = (): دام.تنظیم متن(دام.با شناسه("out")، "بریده شد") پایان مقدار = "مرا انتخاب کنید و Ctrl+X بزنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`چسباندن` paste onpaste	وقتی کاربر می‌چسباند رخ می‌دهد، پیش از درج متن. `event.clipboardData.getData('text')` متن چسبانده‌شده است.	`ورودی: چسباندن = (): دام.تنظیم متن(دام.با شناسه("out")، "چسبانده شد") پایان جانگهدار = "اینجا Ctrl+V بزنید" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر حالت` toggle ontoggle	بعد از باز یا بسته شدن عنصر `جزئیات` و بعد از نشان داده یا پنهان شدن واشو رخ می‌دهد (`newState` برابر `open` یا `closed` است). کمی بعد از تغییر می‌آید.	`جزئیات: تغییر حالت = (): دام.تنظیم متن(دام.با شناسه("out")، "جزئیات عوض شد") پایان خلاصه: محتوا = "بیشتر" پایان پاراگراف: محتوا = "متن پنهان" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`پیش از تغییر حالت` before toggle onbeforetoggle	درست پیش از باز یا بسته شدن واشو (و در مرورگرهای تازه‌تر پنجره‌ی گفتگو) رخ می‌دهد و لغوشدنی است. `event.newState` حالتی است که قرار است شروع شود.	`دکمه: هدف واشو = "tip" محتوا = "نمایش" پایان جعبه: شناسه = "tip" واشو = auto پیش از تغییر حالت = (): دام.تنظیم متن(دام.با شناسه("out")، "در شرف تغییر") پایان محتوا = "یک واشو" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`انصراف` cancel oncancel	روی `پنجره گفتگو` وقتی رخ می‌دهد که کاربر با Escape بستنش را بخواهد. می‌شود لغوش کرد تا پنجره باز بماند. پنجره‌ای که با کد بسته شود آن را نمی‌فرستد.	`دکمه: کلیک = "document.getElementById('d').showModal()" محتوا = "باز کردن" پایان پنجره گفتگو: شناسه = "d" انصراف = (): دام.تنظیم متن(دام.با شناسه("out")، "Escape زده شد") پایان پاراگراف: محتوا = "Escape بزنید" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بسته شدن` close onclose	روی `پنجره گفتگو` بعد از بسته شدنش رخ می‌دهد، با Escape، با `close()` یا با فرمی که `method = dialog` دارد. `returnValue` آن متنی است که به `close()` داده شده.	`دکمه: کلیک = "document.getElementById('d').showModal()" محتوا = "باز کردن" پایان پنجره گفتگو: شناسه = "d" بسته شدن = (): دام.تنظیم متن(دام.با شناسه("out")، "پنجره بسته شد") پایان دکمه: کلیک = "this.parentNode.close('ok')" محتوا = "بستن" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`پیش از تطبیق` before match onbeforematch	روی عنصری با `پنهان = "until-found"` درست پیش از آنکه مرورگر آن را نشان دهد رخ می‌دهد، چون جست‌وجو در صفحه یا پیوندی به شناسه‌اش جور شده. رویدادگیر می‌تواند بخش دور آن را باز کند. Chrome رویداد را می‌فرستد ولی ویژگی درون‌خطی را نادیده می‌گیرد، پس آن را با `اسکریپت سفارشی` و `addEventListener('beforematch', ...)` ثبت کنید.	`پاراگراف: شناسه = "out" محتوا = "کلمه‌ی زیر را با Ctrl+F پیدا کنید." پایان جعبه: شناسه = "s" پنهان = "until-found" محتوا = "کلمه‌ی پنهان: انار" پایان اسکریپت سفارشی: محتوا = "document.getElementById('s').addEventListener('beforematch', function () { document.getElementById('out').textContent = 'پیدا شد'; });" پایان`

خودتان امتحان کنید

فهرست کارها را طوری کنید که کار خالی را نپذیرد و به جایش زیر کادر پیامی قرمز بنویسد. دفعه‌ی بعد که کاربر چیزی نوشت پیام را پاک کنید.
بگذارید توپ در نمونه‌ی جهت‌نماها با کلیدهای W، A، S و D هم حرکت کند، و با code کاری کنید که در هر چیدمانی کار کند.
به کادر جست‌وجو سطری اضافه کنید که بگوید چند مورد جور است. آن را از همان رویدادگیر به‌روز کنید.
فرم ثبت نامی بنویسید که دو گذرواژه می‌خواهد. با ورودی روی هر دو کادر آن‌ها را مقایسه کنید و با setCustomValidity کاری کنید که تا وقتی فرق دارند فرم فرستاده نشود.