תיאור:
מקשר מטפל אירוע לאירוע "keyup" JavaScript, או מפעיל אירוע הזה על אלמנט.
.keyup( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.keyup( )
הוספה בגרסה: 1.0
.keyup( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של .bind('keyup', handler)
בוריאציה הראשונה, ו-
.trigger('keyup') בשניה.
אירוע keyup
נשלח לאלמנט, כאשר משתמש משחרר כפתור של מקלדת.
מטפל אירוע keyup יכול להיות מצורף לכל אלמנט, אבל אירוע נשלח רק לאלמנט שיש לו פוקוס. האלמנט, שניתן לעשות אליהם פוקוס משתנים בין הדפדפנים, אבל אלמנטים של טופס תמיד יכולים לקבל פוקוס, כמועמדים סבירים לסוג אירוע הזה.
לדוגמא, נתבונן על HTML:
<form> <input id="target" type="text" value="Hello there" /> </form> <div id="other"> Trigger the handler </div>
המטפל האירוע יכול להיות קשור לשדה קלט:
$('#target').keyup(function() {
alert('Handler for .keyup() called.');
});
עכשיו, כאשר מצביע נמצא בתוך שדה וכפתור הוקש ושוחרר, תוצג הודעה:
Handler for .keyup() called.
אנחנו יכולים להפעיל את האירוע באופן ידני, כאשר אלמנט נוסף הוקש:
$('#other').click(function() {
$('#target').keyup();
});
אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
עם יש לתפוס הקשת כפתורים בכל מקום (לדוגמא, צירוף גלובלי של כפתורים בדף), רצוי ליישם התנהגות הזו לאובייקט document. מכיוון שאירוע מרחיב, כל ההקשות כפתורים מכוונות לאובאייקט document, אם לא עצרו אותו במיוחד.
כדי לקבוע איזה כפתור הוקש, אנחנו יכולים לבחון אובייקט אירוע, שנשלח למטפל של פונקציה.
לעומת שדפדפנים משתמשים במאפיינים שונים כדי לשמור מידע הזה, jQuery מנרמל מאפיין .which, כך שאנחנו יכולים להשתמש בו בבטחון כדי לקבל קוד של המקש.
קוד הזה מתייחס למקש על המקלדת,
כולל קודים עבור מקשים מיוחדים, כגון חצים.
כדי לתפוס טקסט שהוכנס,
.keypress()
יכול להיות בחירה טובה יותר.
דוגמאות
דוגמה 1
מגדיר פעולה כשה מקש escape שוחרר$(document).keyup(function(event){
if (event.keyCode == 27) {
alert('escaped!');
}
});
דוגמא 1- קוד מלא:
מגדיר פעולה כשה מקש escape שוחרר<!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(){
$(document).keyup(function(event){
if (event.keyCode == 27) {
alert('escaped!');
}
});
});
</script>
</head>
<body>
Press escape button
</body>
</html>
דוגמא 2
מציג אובייקט אירוע עבור מטפל keyup, כאשר כפתור שוחרר בתוך שדה קלט.
var xTriggered = 0;
$('#target').keyup(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keyup();
});
דוגמא 2 - קוד מלא:
מציג אובייקט אירוע עבור מטפל keyup, כאשר כפתור שוחרר בתוך שדה קלט.
<!DOCTYPE html>
<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').keyup(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keyup();
});
});
</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>
האם מידע זה היה מועיל?
