Javascript - הגבלת טיפוס הנתונים בשדה

אחת הדרישות הבסיסיות ביותר בתכנון של טופס היא שנוכל להגדיר איזה סוג מידע יוכל משתמש להזין לשדה. האם מידע מספרי, מחרוזת או עירוב של השניים. שפת HTML5 מאפשרת לשלוט בסוג המידע המוזן שדה מסוג <input> באמצעות התכונה pattern. (תוכלו לקרוא על כך במדריך לאימות נתונים בשדות קלט באתר זה). אולם, לא כל הדפדפנים ובוודאי שלא כל גרסאות הדפדפנים תומכים עדיין בתכונה pattern ולכן אנו נדרשים לפיתרון מסוג אחר, כזה שמעורב בו קוד Javascript.

דוגמת קוד לפונקצית Javascript שאינה מאפשרת למשתמש להקיש תווים לא מספריים לשדה

function numeric(e){
e.value = e.value.replace( /[^0-9]+/g, '');
}

בקוד למעלה יצרנו פונקציה ששמה numeric. פונקציה זו מקבלת כפרמטר את השדה שברצוננו שיהיה מספרי בלבד הפונקציה אינה מאפשרת קליטת תווים לשדה אלא אם כן הם מספריים. ביכולתנו להחליף את הביטוי הרגולארי שבו עשינו שימוש בפונקציה כך שהשדה יוגבל לסוגי תווים אחרים. הפונקציה הבאה למשל תגביל את השדה לתווים מספריים ולאותיות בלבד ולא תאפשר קליטת תווים מיוחדים

דוגמה לטופס HTML העושה שימוש בפונקציה שלנו לצורך הגבלת שדה לתווים מספריים בלבד

<form>
   Numeric Field: <input type="text" id="f1" onkeyup="numeric(this)">
</form>

בדוגמת הקוד למעלה יצרנו טופס HTML ובו שדה אחד. לאירוע onkeyup של הטופס הצמדנו קריאה לפונקציה שלנו, תוך שאנו מעבירים לה את הפרמטר הנדרש, קרי ,השדה שאותו עליה להגביל לתווים מספריים בלבד.

דוגמה לדף HTML מלא המכיל את הטופס ואת הפונקציה להגבלת שדה לתווים מספריים

<html>
<head>
 <title>Required Field Demo with Javascript</title>
 <script type="text/javascript">
   function numeric(e){
   e.value = e.value.replace( /[^0-9]+/g, ''); }
 </script>
</head>
<body>
 
<form>
<form>
   Numeric Field: <input type="text" id="f1" onkeyup="numeric(this)">
</form>

</body> </html>

מאמרים נוספים בנושא זה

מדריך HTML5 לאימות נתונים בשדות קלט

מדריך לאירועים בשפת Javascript

מדריך ליצירת שדות חובה בטופס בעזרת קוד Javascript

 


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש