שיעור 5
דף 4: ארועי שדות הטקסט (Text Field Events).
שדות הטקסט מבינים את המתודות: onBlur, onFocus וכן onChange. אירוע ה- onFocus מתרחש כאשר מישהו לוחץ בתוך שדות הטקסט. onBlur מתרחש כאשר מישהו יוצא משדות הטקסט ע"י לחיצה מחוץ לשדה או ע"י הקשה על מקש ה- Tab. onChange מתרחש כאשר מישהו משנה משהו בתוך שדות הטקסט ומזיז אותו מחוץ לשדות הטקסט.
נסה לעשות את כל הדברים שנאמרו לעיל בתוך שדה הטקסט מטה, וראה מה מתרחש באיזורי הטקסט.
ככה זה עובד. שדות הטקסט נראים כך:
<input type="text" name="first_text"
onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">
כל אחד מה- event handlers קורא לפונקצית ה- ()writelt , שהגדרתי בראש הטופס (header). ראש הטופס נראה כך:
<head>
<title>Text Field Events</title>
<script language="JavaScript">
<!-- hide me
function writeIt(the_word)
{
var word_with_return = the_word + "\n";
window.document.first_form.the_textarea.value += word_with_return;
}
// show me -->
</script>
</head>
כל זה אמור להיות מאוד מוכר לך. השורות הראשונות אמורות להיות שורות קוד טיפוסיות להקדמה של JavaScript והגדרת הפונקציות. השורה הראשונה בגוף הפונקציה,
var word_with_return = the_word + "\n";
מגדירה מחדש את המשתנה, word_with_return, ומציבה לו את ערכו תוך שרשור הסימון '\n' בסופו. (זוכר שהסימן '/n' הינו סימון סטנדרטי לשורה החדשה).
השורה הבאה היא:
window.document.first_form.the_textarea.value += word_with_return;
שורה זו אומרת: "הצב לתוך הערך של איזור הטקסט את ערכו הנוכחי והוסף את המשתנה החדש". לימוד קיצור זה כוסה כאשר למדנו על הלולאות. זה בדיוק כמו לרשום:
windows.document.first_form.the_textarea.value = window.document.first_form.the_textarea.value + word_with_return;
זה רק לוקח פחות זמן. עד עכשיו, ראינו תכונות רבות של שדות טקסט ואזורי טקסט (ערכם) וכמה אירועים ששדות טקסט ואזורי הטקסט אחראים להם. הדבר האחרון שעלייך לדעת אודות אלמנטים אלו, הוא המתודות שעליהן הם אחראים: מתודת ()blur, מתודת ()focus ומתודת ()select.
הנה ,כמה לינקים על מנת להראות כיצד עובדות מתודות ה- ()focus וה- ()select. היזהר, לפעמים הם מפסיקים לעבוד אחרי פעם אחת.
הנה קוד הטופס ושני הלינקים:
<form name="method_form">
<input type="text" name="method_text" size=40 value="Hey, hey, we're the monkeys">
</form>
<a href="#" onMouseOver="window.document.method_form.method_text.focus();"> Mouseover to focus</a>
<a href="#" onMouseOver="window.document.method_form.method_text.select();"> Mouseover to select</a>
כניסה למתודות של שדות הטקסט היא כמו כניסה למתודות של כל אובייקט אחר:
obeject_name.method()
window.document.form_name.text_field_name
כך שעל מנת לקרוא למתודת ה- ()focus בשדות הטקסט שנמצאים מעלה, נכתוב:
window.document.method_form.method_text.focus();
זהו רוב החומר שיש לדעת על שדות טקסט ואזורי טקסט. אנחנו כמעט מוכנים לנסות את התרגיל הראשון לשיעור זה. קודם כל יש דבר אחד שאתה צריך לדעת על אחראי הטופס (form handlers) לפני שתוכל לעשות את התרגיל.
חזור לתחילת הדף
לדף הבא «--
|
