یک صفحه HTML و JavaScript بسازید که یک فرم پویا داشته باشد؛ کاربر بتواند با کلیک روی "افزودن" فیلد جدید آدرس ایمیل اضافه کند، فیلدها را حذف کند و هنگام ارسال لیستی از تمام ایمیل‌های وارد شده را در صفحه نمایش دهد.

2.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:27

0.0

برای حل این مسئله از DOM و رویدادها استفاده کنید: دکمهٔ "افزودن" یک input جدید (type="email") با createElement یا cloneNode ایجاد و به فرم اضافه کند، و هر فیلد یک دکمهٔ حذف داشته باشد که با remove() آن را پاک می‌کند. هنگام ارسال فرم با preventDefault() از فرستادن واقعی جلوگیری کنید، با querySelectorAll همهٔ inputها را بخوانید، مقادیر غیرخالی و معتبر را جمع‌آوری کنید و آنها را در یک لیست ساده در صفحه نمایش دهید؛ نکته‌ها: از event delegation برای مدیریت حذف‌ها استفاده کنید و برای اعتبارسنجی اولیه از خصوصیت type="email" و pattern یا چک سادهٔ رشته بهره ببرید.

توسط پژوهشگر در 202 روز قبل ساعت 02:27
دسته بندی ها: JavaScript JavaScript for beginner
sara در 202 روز قبل ساعت 09:35

برای مدیریت فیلدهای پویا از رویداد delegation استفاده کن تا دکمهٔ حذف داخل هر فیلد با یک listener واحد کار کند. اعتبارسنجی اولیه را با type='email' انجام بده و در صورت نیاز از checkValidity() یا regex ساده‌ای مثل /\S+@\S+\.\S+/ برای فیلتر ورودی‌های نامعتبر استفاده کن. هنگام ارسال، با preventDefault() از ارسال واقعی جلوگیری کن و با querySelectorAll('input[type="email"]') مقادیر غیرخالی را جمع‌آوری و در یک لیست ساده نمایش بده. پس از اضافه/حذف، بازخورد مناسب بده و تمرکز را روی فیلد جدید یا آخرین ورودی منتقل کن.

گزارش

2 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری