איך למנוע לחיצה על כפתורים ואלמנטים לחיצים ב-CSS
בפוסט הזה נלמד איך למנוע לחיצה על כפתורים ואלמנטים לחיצים בעזרת CSS, במיוחד בשימושים כמו טפסים חסרים או בזמן ש-Popup פתוח. נסקור את היתרונות והחסרונות של הגישה עם pointer-events: none;.
פוסט קליל וקצרצר על איך למנוע מכפתורים להיות לחוצים (אם יוגה לא עוזרת). 😎 במקרים שבהם נרצה למנוע לחיצה מכפתור, לינק או כל אלמנט לחיץ אחר (לדוגמא שיש שדות ריקים בטופס יצילנו הא-ל, או שיש popup עד שלא סוגרים אותו כל האתר לא פעיל וכדומה). 😣 אפשר לעשות זאת דרך הקוד של הפונקציה בעזרת תנאי פשוט. עריכה : Noam Anisfeld הזכיר לי בלינקדאין גם את disabled שניתן לתת לכפתורים. (לא יעבוד על a) - תודה רבה! ואפשר דרך הcss למנוע לחיצות בעזרת pointer-events: none; מה??? 😲 מבטיח לכם. פתחו שניה את הcodepen!
* (שתלתי לכם שם כמה קשקושי css חמודים בלי קשר - מצאתם?) היתרונות 👍 - קלות - חסימה של מספר אלמנטים יחד. החסרונות 👎 - בני עוולה יוכלו "לטפל" בזה בקלות דרך כלי הבדיקה של הדפדפן. - בדוגמא של הטופס לא "יקפוץ" ההסבר של הדפדפן מה חסר בטופס. - לא מבטל לחיצות מקלדת. שימו לב שגם הcursor לא מראה את הnot-allowed שהוגדר לו בגלל ההגדרה הזאת.
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם