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

next25 ‏ • 19 בינואר, 2007

הקדמה

בסדרת מאמרים זו נלמד איך להכין מרכיבי טופס שלא קיים להם תג.
ההכנה פשוטה מאוד וזה בעזרת שפת התכנות 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)"

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

תכנות נעים!

תגיות: JS, text

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

הקדמה

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

עוד בנושא זה

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

תגיות