לעיתים רבות, אנו מעוניינים לחסום לגולשים את האפשרות להכניס תווים מסויימים לתוך שדות בטפסים. דוגמא זו באה להראות כיצד ניתן לעשות זאת בקלות רבה בעזרת JavaScript. שימו לב שדוגמא זו תעבוד ב-IE בלבד מכיוון שנטסקייפ אינו מכיר את הארוע OnKeypress אשר ישמש אותנו לזהות את ארוע הלחיצה על מקש במקלדת.
איך זה יראה?
שדה זה לא יאפשר לנו להכניס אף אחד מהתווים: !@#$%^&*
שדה זה לא יאפשר לנו להכניס גרש או גרשיים:
שדה זה מקבל אך ורק מספרים:
ואיך נראה הקוד?
שדה זה לא יאפשר לנו להכניס אף אחד מהתווים: !@#$%^&*<br>
<textarea dir =rtl rows=4 cols=50 onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) ||
(event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97))
event.returnValue = false;"></textarea>
<br>
<br>
שדה זה לא יאפשר לנו להכניס גרש או גרשיים:<br>
<input type=text
onKeypress="if (event.keyCode==34 || event.keyCode==39) event.returnValue = false;">
<br>
<br>
שדה זה מקבל אך ורק מספרים:<br>
<input type=text
onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
הסבר על הקוד
בכל אחד מהשדות השתמשנו בארוע onKeypress אשר מזהה לחיצה על מקש. בעת הלחצה על מקש, אנו בודקים את הערך של המקש שהוקש, ואת זה אנו עושים בעזרת event.keyCode אשר מחזיר לנו את הערך ה-ASCII של המקש שהוקש. מפה מה שאנחנו מחליטים לעשות תלוי במה שאנו רוצים. למשל השדה שמקבל רק מספרים, מוודא שערך המקש שהוקש הינו בין 45 ל 57 שזה הערך ה-ASCII של המספרים. הפקודה אשר מורה לחסום את המקש היא event.returnValue = false אשר מורה לדפדן לא לבצע את כתיבת המקש לשדה, אחרת הכל מתבצע.
שימו לב שבכל זאת ניתן להכניס תווים לא חוקים ללא המגבלות שלנו בעזרת הדבקה של התווים בשדה. לא לקחתי את זה בחשבון, אבל ניתן להגביל זאת ע"י חסימת אפשרות ההדבקה בעזרת הוספת הקוד:
onPaste="return false"
בתוך תגית השדה, או ממש לקרוא לכל הקוד אבל אז צריך לערב פה את התוכן של ה-clipboard.
הדוגמא יכולה לשמש אותנו רבות בטפסים הכוללים שדות כמו מיקוד אשר דורשים (לפחות בארץ) מספרים בלבד.
.png)
