Javascript - הגבלת אורך הקלט בשדה

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

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

function restrict_length(e, max){
  if (e.value.length > max) {e.value=e.value.slice(0,max);}
}

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

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

<form>
  Restricted Length: <input type='text' onkeyup="restrict_length(this, 6)">
</form>

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

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

<html>
<head>
 <title>Required Field Demo with Javascript</title>
 <script type="text/javascript">
   function restrict_length(e, max){
    if (e.value.length > max) {e.value=e.value.slice(0,max);}
  }
 </script>
</head>
<body>
 
<form>
<form>
   Restricted Length: <input type='text' onkeyup="restrict_length(this, 6)">
</form>

</body> </html>

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

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

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

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

מדריך Javascript להגבלת טיפוסי הנתונים שניתן לקלוט בשדה


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