תיאור:
מקשר מטפל אירוע לאירוע "keydown" JavaScript, או מפעיל אירוע הזה על אלמנט.
.keydown( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.keydown( )
הוספה בגרסה: 1.0
.keydown( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של .bind('keydown', handler)
בוריאציה הראשונה, ו- .trigger('keydown') בשניה.
אירוע keydown
נשלח לאלמנט כאשר משתמש לוחץ בראשונה כפתור של מקלדת.
הוא יכול להיות מקושר לכל אלמנט,
אבל אירוע נשלח לאלמנט עם פוקוס.
אלמנטים עם פוקוס יכולים להשתנות מדפדפן לדפדפן,
אבל אלמנטים של טופס תמיד יכולים לקבל פוקוס כמועמדים לסוג אירוע הזה.
לדוגמא, נתבונן על HTML:
<form> <input id="target" type="text" value="Hello there" /> </form> <div id="other"> Trigger the handler </div>
מטפל אירוע יכול להיות מקושר לשדה טקסט:
$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});
עכשיו, כאשר מצביע נמצא בתוך שדה וכפתור הוקש, תוצג הודעה:
Handler for .keydown() called.
אנחנו יכולים להפעיל את האירוע באופן ידני, כאשר אלמנט נוסף הוקש:
$('#other').click(function() {
$('#target').keydown();
});
אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
עם יש לתפוס הקשת כפתורים איפה שהוא
(לדוגמא,
צירוף גלובלי של כפתורים בדף),
רצוי ליישם התנהגות הזו לאובייקט
document.
מכיוון שאירוע מרחיב, כל ההקשות כפתורים מכוונות לאובאייקט
document,
אם לא עצרו אותו במיוחד.
כדי לקבוע איזה כפתור הוקש, אנחנו יכולים לבחון
אובייקט אירוע,
שנשלח למטפל של פונקציה.
לעומת שדפדפנים משתמשים במאפיינים שונים כדי לשמור מידע הזה,
jQuery
מנרמל מאפיין
.which,
כך שאנחנו יכולים להשתמש בו בבטחון כדי לקבל קוד מפתח.
קוד הזה תואם למקש במקלדת,
כולל קודים עבור מקשים מיוחדים, למשל, חצים.
כדי לתפוס הכנסת טקסט,
.keypress()
יכול להיות בחירה טובה יותר.
דוגמאות
כדי לבצע פעולות בתגובה ללחיצה מקש מקלדת בדף, נסו:$(window).keydown(function(event){
switch (event.keyCode) {
// ...
// different keys do different things
// Different browsers provide different codes
// see here for details: http://unixpapa.com/js/key.html
// ...
}
});
דוגמא 2
מציג אובייקט אירוע עבור מטפל keydown, כאשר כפתור נלחץ בתוך שדה קלט.
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});
דוגמה 2 - קוד מלא:
מציג אובייקט אירוע עבור מטפל keydown, כאשר כפתור נלחץ בתוך שדה קלט
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://xhtml.co.il//scripts/events.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});
});
</script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text" />
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
</body>
</html>
האם מידע זה היה מועיל?
