וובמאסטר - תיכנות ובניית אתרים

שינוי ערך תיבת טקסט בלחיצה

next25/‏ 19 ינואר, 2007
F+
F-

הקדמה

בסדרת מאמרים זו נלמד איך להכין מרכיבי טופס שלא קיים להם תג.
ההכנה פשוטה מאוד וזה בעזרת שפת התכנות Java Script. ובעיקרון "הכן מהמוכן"-שזאת אומרת שנשתמש במרכיבים מוכנים עם קצת תִכנות ותמונות.

הכנת תיבת מספרים

אם ברצונך להציג בטופס שלך תיבה בה יוזנו רק מספרים בתווך מסויים, ללא הזנת טקסט ובקלי קלות (אפילו ללא מקלדת). המאמר הזה בשבילך.

נתחיל בהכנה. התיבה בנויה מ-input text פשוט, שהמצב שלו הוא readonly – שזאת אומרת שהוא חסום לכתיבה. כך:

ליד נשים תמונה של חץ למעלה () וחץ למטה (-),אפשר לישר אותם בטבלה; הנה קוד הhtml הבסיסי, אני מקווה שלא צריך להסביר, מי שבכל מקרה לא מבין, שיעבור שוב על מדריך html באתר.

<html dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<!--קידוד עיברי-->
<title>תיבת מספר</title>
<!--פה נוסיף את הסקריפטים והעיצוב-->
</head>

<body>
<form name="frm"><!--בהמשך נצטרך את השם לטופס-->
    <table cellpadding="0" cellspacing="0">
    <tr>
        <td><img border="0" src="oTxtup.jpg" width="14" height="9" /></td>
        <td rowspan="2"><input type="text" size="1" value="5" name="num" readonly /></td>
    </tr>
    <tr>
        <td><img border="0" src="oTxtdown.jpg" width="14" height="9" /></td>
    </tr>
</table>
</form>
</body>
</html>


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

function add(num){
    num*=1
    var MAX=10, MIN=5 //הגדרת טווח המספרים המותר
    var CurrentNum = document.frm.num.value *=1 //הערך הנוכחי של תיבת הטקסט
    if(((CurrentNum + num) > MAX) || ((CurrentNum + num) < MIN)){ //בדיקה האם אנחנו בטווח
        alert("המספר גדול מידי\\קטן מידי")
        return
    }
    document.frm.num.value=CurrentNum + num //הצגת המספר החדש
}


יש לנו פונקציה בשם add,בקריאה לפונקציה היא מקבלת מספר שבו היא תשתמש כדי לשנות את המספר בתיבה, הקריאה לפונקציה נראת כך:

Onclick="add(number)"

  • שורה 1: הכפלת num ב-1 נעשית על מנת שמנוע ה-JS יתייחס אליו כמספר ולא כמחרוזת.
  • שורה 2: הגדרת טווח המספרים אותו אין אנו רוצים שהמשתמש יעבור.
  • שורה 3: הכנסת הערך הנוכחי של תיבת הטקסט לתוך משתנה.
  • שורה 4: בדיקה האם המספר נמצא עדיין בטווח הנכון. אם לא, מציגים הודעת שגיאה ויוצאים מהפונקציה.
  • שורה 8: הצגת המספר החדש בתוך תבת הטקסט.


עכשיו נשאר להוסיף את הקריאה לפונקציה כך :

בחץ למטה:

Onclick="add(-1)"

בחץ למעלה:

Onclick="add(1)"

והנה התוצאה הסופית (אחרי עיצוב קטן)

תכנות נעים!

next25

אממממ אמממממ אממממ אמממממ מה?
תגיות: JS‏  /  text‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות