יצירת ממשק נוח שמתחשב במשתמש, צריך לכוון את המשתמש לבצע את הפעולות הנכונות, אך בד בבד לנסות למנוע ממנו לעשות טעויות. משתמש יכול להיות מאוד מתוסכל כאשר התוכנה עשתה פעולה שהוא לא התכוון לה וכעת אין באפשרותו לעשות דבר.
היום אני אתן לכם קוד של אחת הטכניקות המוכרות לנו, היא השאלה שצצה כאשר משתמש מנסה לצאת מדף האינטרנט והדפדפן שואל "האם אתה בטוח?".
בימים אלה אני עובד על בניית מערכת ניהול תוכן בעזרת ה-framework של Zend. כחלק ממערכת ניהול תוכן, בניתי כמובן גם חלק באתר בו עורכים עמודי תוכן. הדף בנוי מתיבות טקסט שונות ועיקרו הוא תיבת הטקסט עם עורך הטקסט, שם נכתב התוכן העיקרי.
אתם בוודאי מכירים את הסיטואציה, הזנתם תכנים רבים בעמוד עריכה כלשהו באינטרנט, לחצתם על כפתור כלשהו שהעביר אתכם לעמוד אחר, וכל המידע שהקלדתם נעלם ולא יחזור.
אני החלטתי שבמערכת שלי אני רוצה לעזור למשתמש ולשאול אותו, האם הוא בטוח שהוא רוצה לצאת מהדף, חיפשתי קצת באינטרנט ומצאתי את פקודת ה-Javascript החביבה: OnBeforeUnload.
השם הארוך הזה, הוא למעשה Event, שמבצע קריאה לפונקציה כאשר המשתמש מנסה לצאת מהדף (לא משנה אם לחץ על כפתור Back, על לינק בדף או אפילו לחץ על סגירת הדפדפן), הפונקציה שמתלווה ל-Event יכולה להחזיר מחרוזות או ערך בוליאני (true או false).
הוסיפו את הקוד הבא לדף HTML, וכך הדפדפן יציג שאלה למשתמש לפני סגירת הדף:
1 2 3 | <script type="text/javascript"> window.onbeforeunload = function(){ return 'כל המידע שלא נשמר יאבד!';} </script> |
שימו לב שהטקסט בעברית ("כל המידע שלא נשמר יאבד!"), הוא טקסט שיתווסף להודעה הקבועה של הדפדפן במבנה הבא:
עזרו למשתמש שלכם למנוע טעות
בבדיקתי אם הדפדפנים השונים, chrome ו-Safari לא תמכו בהודעות בעברית.
שימו לב שאופרה מאז ומתמיד לא תמכה ב-OnBeforeUnload, כך שהקוד הנ"ל לא יעבוד בדפדפן אופרה כלל.
אני הוספתי את הקוד הזה לדפים שבהם עורכים טקסט רב ובמידה והעבודה לא נשמרה.
טפסים? למי זה חשוב? —פיהוק—
סיכום של יום השימושיות