תיאור:
מקשר מטפל אירוע לאירוע "focus" JavaScript, או מפעיל אירוע הזה על אלמנט.
.focus( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.focus( )
הוספה בגרסה: 1.0
.focus( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
-
שיטה הזו היא קיצור של
.bind('focus', handler)בוריאציה הראשונה, ו-,.trigger('focus')בשניה. - אירוע
focusנשלח לאלמנט, כאשר הוא מקבל פוקוס. אירוע הזה ניתן ליישם לסט אלמנטים מצומצמת, כמו למשל, אלמנטים של טופס (<input>,<select>, וכו') וקישורים (<a href>). בגרסאות אחרונות של הדפדפן, אירוע הזה ניתן להשתמש על כל סוגי אלמנטים, באמצעות מאפייןtabindex. אלמנט יכול לקבל פוקוס באמצאות פקודות מקלדת, כמו Tab, או לחיצה עם עכבר על אלמנט. - אלמנט עם פוקוס, בדרך כלל, מודגש בצורה כלשהי בדפדפן, למשל, עם קו מקווקו סביב אלמנט. פוקוס משמש, כדי להגדיר, איזה אלמנט הוא הראשון, כדי לקבל אירועים, הקשורים למקלדת.
לדוגמא, נתבונן על HTML:
<form> <input id="target" type="text" value="Field 1" /> <input type="text" value="Field 2" /> </form> <div id="other"> Trigger the handler </div>
המטפל האירוע יכול להיות קשור לשדה קלט הראשון:
$('#target').focus(function() {
alert('Handler for .focus() called.');
});
עכשיו, אם ללחוץ על שדה ראשון, או לעבור אליו באמצעות כפתור Tab מאיזור אחר, תוצג הודעה:
Handler for .focus() called.
אנחנו גם יכולים להפעיל אירוע, כאשר אלמנט אחר נלחץ:
$('#other').click(function() {
$('#target').focus();
});
אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
אירוע
focus
מתבצע חלקית ב-Internet Explorer.
לכן, סקריפטים,
שמבוססים על משלחת אירוע עם אירוע
focus
לא עובדים באופן עקבי בכל הדפדפנים.
הפעלת פוקוס על אלמנטים מוסתרים גורם לשגיאה ב- Internet Explorer. שימו לב לקרוא
.focus()ללא אפרמטרים רק עבור אלמנטים נראים.
דוגמאות
דוגמה 1
מפעיל פוקוסדוגמא 1 - קוד מלא:
מפעיל פוקוס.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
});
</script>
<style>span {display:none;}</style>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
</body>
</html>
דוגמה 2
כדי למנוע מהמשתמש לכתוב בשדה טקסט, נסו:דוגמא 2- קוד מלא:
כדי למנוע מהמשתמש לכתוב בשדה טקסט, נסו:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("input[type=text]").focus(function(){
$(this).blur();
});
});
</script>
</head>
<body>
<input type="text" />
</body>
</html>
דוגמא 3
כדי לתת פוקוס לאלמנט עם ‘login’ ID בטעינת הדף, נסו:$(document).ready(function(){ $("#login").focus(); });
האם מידע זה היה מועיל?
