תיאור:
מקשר מטפל אירוע לאירוע "keypress" JavaScript, או מפעיל אירוע הזה על אלמנט.
.keypress( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.keypress( )
הוספה בגרסה: 1.0
.keypress( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של .bind('keypress', handler)
בוריאציה הראשונה, ו- .trigger('keypress')
בשניה.
אירוע keypress
נשלח לאלמנט כאשר דפדפן מזהה הקשה במקלדת.
זה דומה לאירוע
keydown,
למעט במקרה של חזרות הקשה.
אם משתמש לוחץ ומחזיק מקש, אירוע
keydown
מופעל פעם אחד,
אבל אירועים
keypress
נפרדים מופעלים בנפרד עבור כל תו שהוקש.
בנוסף, כפתורי שינוי
(כמו Shift)
הם סיבה לאירועים
keydown,
אבל לא לאירועים keypress.
מטפל אירוע keypress
יכול להיות מצורף לכל אלמנט,
אבל אירוע נשלח רק לאלמנט שיש לו פוקוס.
האלמנט, שניתן לעשות אליהם פוקוס משתנים בין הדפדפנים,
אבל אלמנטים של טופס תמיד יכולים לקבל פוקוס,
כמועמדים סבירים לסוג אירוע הזה.
לדוגמא, נתבונן על HTML:
<form> <fieldset> <input id="target" type="text" value="Hello there" /> </fieldset> </form> <div id="other"> Trigger the handler </div>
המטפל האירוע יכול להיות קשור לשדה קלט:
$('#target').keypress(function() {
alert('Handler for .keypress() called.');
});
עכשיו, כאשר מצביע נמצא בתוך שדה וכפתור הוקש, תוצג הודעה:
Handler for .keypress() called.
ההודעה חוזרת אם המקש הוא הוחזק מטה. אנחנו יכולים להפעיל את האירוע באופן ידני, כאשר אלמנט נוסף הוקש:
$('#other').click(function() {
$('#target').keypress();
});
אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
עם יש לתפוס הקשת כפתורים איפה שהוא
(לדוגמא,
צירוף גלובלי של כפתורים בדף),
רצוי ליישם התנהגות הזו לאובייקט
document.
מכיוון שאירוע מרחיב, כל ההקשות כפתורים מכוונות לאובאייקט
document,
אם לא עצרו אותו במיוחד.
כדי לקבוע איזה כפתור הוקש, אנחנו יכולים לבחון
אובייקט אירוע,
שנשלח למטפל של פונקציה.
לעומת שדפדפנים משתמשים במאפיינים שונים כדי לשמור מידע הזה,
jQuery
מנרמל מאפיין
.which,
כך שאנחנו יכולים להשתמש בו בבטחון כדי לקבל קוד של התו.
שימו לב, ש-
keydown ו- keyup
מספקים קוד עם ציון איזה כפתור הוקש,
בזמן ש-
keypress
מציין איזה תו הוקש.
לדוגמא אות קטנה
"a"
מוגדרת כי
65 עם keydown ו- keyup,
וכי
97 עם keypress.
אות גדולה "A"
מוגדרת כי
65
בכל האירועים.
בגלל ההבדל הזה, בזמן תפיסה מקשים מיוחדים, כגון מקשים עם חצים,
.keydown() או .keyup()
תהיה בחירה טובה יותר.
דוגמאות
דוגמה 1
מציג רווחים ותווים בהקלדה
$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var c = String.fromCharCode(e.which);
$("p").append($(""))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
דוגמא 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").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var c = String.fromCharCode(e.which);
$("p").append($("<span/>"))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
});
</script>
<style>
input { margin:10px; }
p { color:blue; margin:10px; font-size:18px; }
p.hilite { background:yellow; }
div { color:red; }
</style>
</head>
<body>
<input type="text" />
<p>Add text - </p>
<div></div>
</body>
</html>
דוגמא 2
מציג אובייקט אירוע עבור מטפל kepress, כאשר כפתור נלחץ בתוך שדה קלט.var xTriggered = 0;
$('#target').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keypress() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keypress();
});
דוגמה 2 - קוד מלא:
מציג אובייקט אירוע עבור מטפל keypress, כאשר כפתור נלחץ בתוך שדה קלט<!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').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keypress() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keypress();
});
});
</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>
האם מידע זה היה מועיל?
