از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در توسعه وب frontend، می توانید با تغییر پویا عناصر یا وضعیت آنها بر اساس برخی شرایط، تجربه بهتری را برای کاربران خود فراهم کنید. یکی از نمونه‌های آن، فعال یا غیرفعال کردن ورودی‌های HTML است که می‌توانیم از طریق jQuery انجام دهیم. در این بایت، نحوه انجام این کار و برخی موارد استفاده را بررسی خواهیم کرد.
درک ورودی HTML
فیلدهای ورودی HTML بخش اصلی هر فرم در یک صفحه وب هستند. آنها به کاربران اجازه می دهند اطلاعاتی را وارد کنند که می تواند توسط سرور یا سایر کدهای ظاهری پردازش شود. این <input> عنصر همه کاره است، با انواع مختلفی مانند “متن”، “رمز عبور”، “چک باکس”، “رادیو”، و غیره. اما اگر شرایطی وجود داشته باشد که شما نیاز به کنترل دسترسی به این فیلدهای ورودی داشته باشید، چه؟ در اینجاست که فعال کردن و غیرفعال کردن آنها وارد عمل می شود.
چرا ورودی های HTML را فعال یا غیرفعال کنیم؟
چرا کسی می خواهد یک فیلد ورودی HTML را فعال یا غیرفعال کند؟ خوب، معلوم است که سناریوهای زیادی وجود دارد. فرض کنید فرمی دارید که کاربر باید قبل از ادامه با شرایط و ضوابط موافقت کند. می‌توانید دکمه «ارسال» را تا زمانی که کاربر کادر «موافقم» را علامت بزند غیرفعال کنید. یا، شاید شما یک فرم چند مرحله ای داشته باشید که در آن فیلدهای خاص فقط باید زمانی قابل دسترسی باشند که فیلدهای قبلی پر شده باشند.
به عنوان مثال، یک صفحه ورود که در آن ورودی رمز عبور غیرفعال است تا زمانی که ایمیل پر شود:
توجه کنید که چگونه ورودی رمز عبور در تصویر بالا خاکستری شده است. این نشان دهنده غیرفعال بودن آن است.
اصول اولیه jQuery
قبل از اینکه به نحوه فعال یا غیرفعال کردن ورودی ها بپردازیم، ابتدا در مورد برخی از اصول اولیه jQuery صحبت می کنیم. jQuery یک کتابخانه جاوا اسکریپت سریع، کوچک و غنی است. مواردی مانند پیمایش و دستکاری سند HTML، مدیریت رویداد و انیمیشن را ساده می کند و با یک API با کاربری آسان که در بسیاری از مرورگرهای مختلف کار می کند، کارها را بسیار ساده تر می کند.
برای استفاده از jQuery، باید آن را در پروژه خود قرار دهید. می توانید آن را از وب سایت رسمی جی کوئری یا آن را مستقیماً از یک CDN وارد کنید، مانند این:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
فعال کردن ورودی با جی کوئری
اکنون که اصول اولیه را پوشش دادیم، بیایید ببینیم چگونه می توانیم یک فیلد ورودی HTML را با استفاده از jQuery فعال کنیم. فرض کنید یک فیلد ورودی غیرفعال مانند شکل زیر داریم:
<input type="text" id="myInput" disabled>
ما به راحتی می توانیم این فیلد ورودی را با استفاده از .prop() تابع در jQuery، که می تواند برای تغییر آن استفاده شود disabled ویژگی در فیلد ورودی
$('#myInput').prop('disabled', false);
و بس! فیلد ورودی شما اکنون فعال است و آماده پذیرش ورودی کاربر است.
غیرفعال کردن ورودی با جی کوئری
حالا بیایید ببینیم چگونه می‌توانید یک فیلد ورودی HTML را با استفاده از jQuery غیرفعال کنید. باز هم، .prop() روش بهترین دوست شما برای این کار است. این روش یک روش ساده برای بدست آوردن مقدار ویژگی فقط برای اولین عنصر در مجموعه منطبق ارائه می دهد. برمی گردد undefined برای مقادیر ویژگی های تعریف نشده
در اینجا مثالی از نحوه استفاده از آن آورده شده است:
// Disabling an input field with jQuery
$('#myInput').prop('disabled', true);
در این مثال، $('#myInput') فیلد ورودی را انتخاب می کند و .prop('disabled', true) ویژگی ‘disabled’ را روی true قرار می دهد. یعنی فیلد ورودی اکنون غیرفعال شده است و کاربر نمی تواند با آن تعامل داشته باشد.
خطاهای رایج و نحوه رفع آنها
بنابراین چه مسائلی می تواند با یک عملیات ساده مانند این پیش بیاید؟ یکی از خطاهای رایج این است TypeError: $(...).prop is not a function. این معمولا زمانی اتفاق می افتد که از نسخه قدیمی جی کوئری استفاده می کنید. این .prop() تابع در jQuery 1.6 معرفی شده است، بنابراین مطمئن شوید که از این نسخه یا نسخه جدیدتر استفاده می کنید.
یکی دیگر از اشتباهات رایج فراموش کردن گنجاندن کتابخانه jQuery در پروژه است. همیشه به یاد داشته باشید که شامل <script> تگ jQuery در فایل HTML شما:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
برخورد با چند ورودی
هنگام کار با فرم هایی که دارای چندین فیلد ورودی هستند، jQuery تکنیک های مختلفی را برای مدیریت کارآمد آنها ارائه می دهد. نه تنها می‌توانید ورودی‌های خاص را با استفاده از آن غیرفعال کنید :eq() انتخابگر، اما شما همچنین می توانید تمام فیلدهای ورودی را حلقه بزنید و آنها را یکباره غیرفعال کنید.
غیرفعال کردن ورودی های خاص با :eq()
این :eq() انتخابگر عنصری را با یک عدد شاخص مشخص هدف قرار می دهد و غیرفعال کردن انتخابی ورودی ها را آسان می کند. در اینجا نحوه غیرفعال کردن فیلد ورودی دوم آمده است:
// Disabling the second input field with jQuery
$('input:eq(1)').prop('disabled', true);
در این قطعه کد، $('input:eq(1)') فیلد ورودی دوم را انتخاب می کند زیرا نمایه سازی از 0 شروع می شود. .prop('disabled', true) از غیرفعال کردن آن مراقبت می کند.
توجه داشته باشید: به خاطر داشته باشید که شماره گذاری شاخص در :eq() انتخابگر از 0 شروع می شود. بنابراین، :eq(1) در واقع عنصر دوم را هدف قرار می دهد.
تغییر همه ورودی ها
برای مثال، اگر نیاز دارید که تمام فیلدهای ورودی را غیرفعال کنید، می توانید با استفاده از جی کوئری از طریق آنها تکرار کنید. .each() عملکرد و اعمال شود .prop('disabled', true) به هر کدام در اینجا به نظر می رسد:
// Iterating over and disabling all input fields
$('input').each(function(){
$(this).prop('disabled', true);
});
در این مورد، $('input') تمام فیلدهای ورودی را هدف قرار می دهد و .each() از طریق هر یک تکرار می شود و آنها را در فرآیند غیرفعال می کند.
با درک این دو رویکرد، می‌توانید کنترل دقیق‌تری بر ورودی‌های فرم داشته باشید، یا آنها را به صورت انتخابی یا انبوه غیرفعال کنید.
نتیجه
در این بایت، نحوه فعال و غیرفعال کردن فیلدهای ورودی HTML با استفاده از jQuery را بررسی کردیم. همچنین درباره خطاهای رایجی که ممکن است با آن ها مواجه شوید و نحوه برخورد با ورودی های متعدد صحبت کردیم.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-26 17:33:04
