از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
یکی از راه هایی که می توانید UX را تقویت کنید این است که به کاربران اجازه دهید با استفاده از صفحه کلید خود با برنامه وب شما تعامل داشته باشند. این به ویژه در هنگام تشکیل ورودی ها و دکمه ها مفید است. در این بایت، چگونگی راه‌اندازی کلیک روی دکمه با جاوا اسکریپت را بررسی خواهیم کرد وارد کلید فشرده شده است
رویدادها در جاوا اسکریپت
رویدادها بخش اصلی ساخت برنامه های کاربردی وب تعاملی هستند. آنها تعامل کاربر با صفحه وب را نشان می دهند، مانند کلیک ها، فشار دادن کلیدها، حرکات ماوس و غیره. جاوا اسکریپت سیستمی را برای مدیریت این رویدادها ارائه می دهد و به ما توسعه دهندگان اجازه می دهد تا تجربیات پویا و تعاملی ایجاد کنیم.
کلیک کنید رویداد
را onclick رویداد در جاوا اسکریپت زمانی فعال می شود که کاربر روی یک عنصر کلیک می کند. این رویداد اغلب برای اجرای یک تابع با کلیک روی یک دکمه استفاده می شود، مانند زیر:
<button onclick="alert('Hello, World!')">Click me</button>
در این قطعه کد، هر زمان که دکمه کلیک می شود، یک جعبه هشدار با پیام “سلام، جهان!” روی صفحه نمایش ظاهر می شود.
بدون کلید و روی کلید مناسبت ها
درست مثل onclick، onkeydown و onkeypress رویدادها زمانی فعال می شوند که کاربر با یک عنصر تعامل داشته باشد. با این حال، به جای کلیک ماوس، زمانی که کاربر کلیدی را روی صفحه کلید خود فشار می‌دهد، این رویدادها اجرا می‌شوند. را onkeydown رویداد در لحظه ای که یک کلید فعال می شود فشار داده شده است، در حالی که onkeypress هنگامی که یک کلید فعال می شود فشرده و آزاد شد.
بیایید نگاهی به روش عملکرد این بیاندازیم:
<input type="text" onkeydown="console.log('Key is pressed down')" onkeypress="console.log('Key is pressed and released')">
در این قطعه کد، هرگاه کلیدی در قسمت ورودی فشار داده شود، “کلید فشرده شده است” به سیستم وارد می شود. console. هنگامی که کلید فشرده و رها می شود، “Key is pressed and release” ثبت می شود.
توجه داشته باشید: تفاوت اصلی بین onkeydown و onkeypress آن است onkeydown می تواند تشخیص دهد همه کلیدها، در حالی که onkeypress فقط کلیدهایی را شناسایی می کند که یک مقدار کاراکتر تولید می کنند، مانند حروف الفبا، اعداد و علائم نگارشی. این باعث می شود onkeydown مناسب تر برای استفاده ما از تشخیص وارد فشردن کلید.
چرا دکمه Trigger روی Enter کلیک می کنیم؟
یکی از جنبه های کلیدی تجربه کاربری خوب این است که اطمینان حاصل کنید که وب سایت یا برنامه شما نه تنها برای استفاده آسان است، بلکه بصری نیز می باشد. یکی از قراردادهای رایج که بسیاری از کاربران به آن عادت دارند این است که با فشار دادن دکمه، یک کلیک را فعال کنند. وارد کلید این امر به ویژه در مورد ارسال فرم مهم است، جایی که کاربران ممکن است دسته ای از فیلدها را پر کنند و طبیعتاً انتظار دارند با فشار دادن فرم را ارسال کنند. وارد، به جای اینکه به صورت دستی روی دکمه ارسال کلیک کنید.
فعال کردن یک دکمه روی وارد فشار دادن کلید نه تنها تجربه کاربر را بهبود می بخشد، بلکه قابلیت استفاده را برای کاربرانی که برای ناوبری به صفحه کلید متکی هستند، افزایش می دهد، احتمالاً برای افزایش سرعت process یا به دلیل محدودیت های فیزیکی
اجرای دکمه روی Trigger روی Enter Key Press کلیک کنید
برای پیاده سازی این، البته باید از جاوا اسکریپت استفاده کنیم. به طور خاص، ما از مدیریت رویداد جاوا اسکریپت برای گوش دادن به آن استفاده خواهیم کرد وارد کلید را فشار داده و سپس دکمه کلیک را فعال کنید.
راه اندازی HTML
بیایید با یک فرم HTML بسیار ساده با یک فیلد ورودی و یک دکمه شروع کنیم:
<form id="myForm">
<input type="text" id="myInput" placeholder="Type something...">
<button id="myButton">Submit</button>
</form>
در این تنظیمات، یک فرم با یک داریم id از “myForm”، یک فیلد ورودی با یک id از “myInput”، و یک دکمه با یک id از “myButton”.
جاوا اسکریپت
حالا بیایید جاوا اسکریپت را اضافه کنیم تا دکمه کلیک روی آن فعال شود وارد فشردن کلید. ما استفاده خواهیم کرد addEventListener روش گوش دادن به رویداد “keydown” در فیلد ورودی. وقتی رویداد فعال شد، بررسی می‌کنیم که آیا کلید فشرده شده بود یا خیر وارد (کد کلید 13)، و اگر چنین است، با استفاده از دکمه کلیک را فعال می کنیم click روش.
document.getElementById('myInput').addEventListener('keydown', function(event) {
// Check if Enter was pressed
if (event.keyCode === 13) {
// Prevent the default action
event.preventDefault();
// Trigger the button click
document.getElementById('myButton').click();
}
});
ابتدا فیلد ورودی را توسط آن بدست می آوریم id استفاده کردن document.getElementById. سپس یک شنونده رویداد برای رویداد “keydown” اضافه می کنیم. در داخل شنونده رویداد، بررسی می کنیم که آیا کد کلید رویداد 13 است که مطابق با آن است وارد کلید اگر اینطور باشد، از اقدام پیش‌فرض با استفاده از آن جلوگیری می‌کنیم event.preventDefault (که عبارت است از ارسال فرم و بازخوانی pageو سپس با استفاده از دکمه کلیک کنید document.getElementById('myButton').click().
اگر از jQuery استفاده می کنید، بهتر است از چیزی شبیه به این استفاده کنید:
$("#myInput").keyup(function(event) {
if (event.keyCode === 13) {
event.preventDefault();
$("#myButton").click();
}
});
کد از نظر ساختار بسیار شبیه است، اما کمی فشرده تر و خواندن آن آسان تر است.
و شما آن را دارید! تنها با چند خط جاوا اسکریپت، اکنون به کاربران اجازه می‌دهیم تا فرمی را با فشار دادن دکمه ارسال کنند وارد کلید اگرچه این ممکن است جزییات کوچکی به نظر برسد، این نوع پیشرفت‌ها هستند که می‌توانند تفاوت بزرگی در تجربه کلی کاربر ایجاد کنند.
مدیریت حباب و انتشار رویداد
حباب رویداد مفهومی در جاوا اسکریپت است که در آن یک رویداد در عمیق ترین عنصر ممکن راه اندازی می شود و سپس بر روی عناصر والد به ترتیب تودرتو راه اندازی می شود. در نتیجه، یک عنصر والد می تواند به رویداد عنصر فرزند واکنش نشان دهد. این می‌تواند باعث رفتار غیرمنتظره‌ای شود، زمانی که می‌خواهید یک دکمه را فعال کنید وارد فشردن کلید.
قطعه کد زیر را در نظر بگیرید:
<body>
<div id="parent">
Parent
<button id="child">Click Me!</button>
</div>
<script>
// Attach event listener to the child element
document.getElementById("child").onclick = function(event) {
alert("Child Button Clicked!");
});
// Attach event listener to the parent element
document.getElementById("parent").onclick = function(event) {
alert("Parent Div Clicked!");
});
</script>
</body>
در این صورت، اگر روی عنصر فرزند کلیک کنید، والد div رویداد “onclick” را نیز دریافت خواهد کرد.
برای جلوگیری از این، می توانید استفاده کنید event.stopPropagation(). این مانع از انتشار بیشتر رویداد جاری در مراحل ضبط و حباب می شود.
موارد استفاده مشابه
فعال کردن یک دکمه روی یک کلیک کنید وارد فشار دادن کلید تنها یکی از موارد استفاده مشابه است. چندتا دیگه رو ببینیم
ارسال فرم با فشار دادن کلید Enter
یکی از موارد استفاده رایج برای ایجاد رویدادها با وارد کلید ارسال فرم است. به‌طور پیش‌فرض، اکثر مرورگرها زمانی فرم ارسال می‌کنند وارد با فرض اینکه فرم دارای دکمه ارسال باشد، کلید فشار داده می شود. با این حال، ممکن است مواردی وجود داشته باشد که بخواهید به صورت دستی این رفتار را با استفاده از جاوا اسکریپت کنترل کنید.
فرم HTML زیر را در نظر بگیرید:
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<input type="text" id="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
شما می توانید برای رویداد “keydown” گوش دهید و بررسی کنید که آیا وارد کلید فشرده شده است اگر چنین است، می توانید به صورت دستی فرم را ارسال کنید:
document.getElementById('myForm').addEventListener('keydown', function(event) {
// Check if Enter was pressed without Shift, Ctrl, Alt, Caps
if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.capsLockKey) {
this.submit();
}
});
توجه داشته باشید: همچنین ممکن است مهم باشد که کلیدهای اصلاح کننده مانند تغییر مکان، Ctrl، جایگزین، و کلید Caps Lock. اگر این کلیدها همراه با وارد، فرم نباید ارسال شود. این به کاربران این امکان را می دهد که در صورت نیاز، شکست های خط را در فیلدهای متنی وارد کنند.
راه اندازی رویدادهای دیگر در فشار کلید
فراتر از ارسال فرم، رویدادهای بی‌شماری دیگر وجود دارد که ممکن است بخواهید با فشار دادن کلید راه‌اندازی کنید. به عنوان مثال، ممکن است بخواهید یک دکمه را در زمانی که فضا نوار فشار داده شده است. دکمه ای را در نظر بگیرید که یک لامپ را روشن و خاموش می کند:
<button id="lightSwitch">Toggle Light</button>
می‌توانید به رویداد «keydown» گوش دهید و با فشار دادن نوار Space، کلیک دکمه را فعال کنید:
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
document.getElementById('lightSwitch').click();
}
});
در این حالت، فشار دادن نوار Space همان اثر کلیک روی دکمه را خواهد داشت. امکانات بی پایان هستند و شما می توانید تقریباً هر رویدادی را با فشار دادن هر کلیدی راه اندازی کنید.
نتیجه
در این بایت، روش راه‌اندازی کلیک روی دکمه‌ها و سایر رویدادها را با فشار دادن کلید در جاوا اسکریپت بررسی کرده‌ایم. ما روش ارسال فرم‌ها را بررسی کرده‌ایم وارد کلید و روش فعال کردن کلیک روی دکمه با فضا بار. ما همچنین روی مسائل بالقوه مانند حباب کردن رویدادها/تبلیغات صحبت کرده ایم.
منتشر شده در 1402-12-27 18:06:05
