Introduction to JavaScript Keyboard Events
Keyboard events वे events होते है जो user के keyboard से interact करने पर generate होते है। यदि आप keyboard actions को handle करना चाहते है तो इसके लिए keyboard events को use कर सकते है।
उदाहरण के लिए आप user द्वारा key press किये जाने पर कोई message show कर सकते है, text का color change कर सकते है, document का background color change कर सकते है या फिर और कोई दूसरा task भी complete कर सकते है।
Javascript आपको 3 keyboard events provide करती है।
ऊपर दिए गए उदाहरण में जैसे ही user कोई keypress करता है तो keypressFunction() call होता है और document का background color red हो जाता है।
इस उदाहरण में यदि आप shift, ctrl और alt key press करते है तो event generate नहीं होता है। ये script निचे दिया गया output generate करती है।
उदाहरण के लिए आप user द्वारा key press किये जाने पर कोई message show कर सकते है, text का color change कर सकते है, document का background color change कर सकते है या फिर और कोई दूसरा task भी complete कर सकते है।
Javascript आपको 3 keyboard events provide करती है।
- onkeypress - When user press a key (ctrl, shift, alt are excluded from this event.)
- onkeydown - When user press any key from keyboard
- onkeyup - When user releases a key after pressing
इन events के बारे में निचे detail से दिया जा रहा है। इन्हें ठीक से समझकर और use करके आप अपने page को और भी interactive बना सकते है।
onkeypress
जब user keyboard पर किसी key को press करता है तो onkeypress event generate होता है। एक webpage के संदर्भ में यदि देखा जाए तो keyboard का प्रयोग textboxes में input देने या online gaming आदि के लिए use किया जाता है।
इस event के generate होने पर कई actions लिए जा सकते है जैसे की आप कोई message show कर सकते है या फिर कोई task initiate कर सकते है।
ये event सभी keys के लिए generate नहीं होता है। कुछ ऐसी keys भी है जैसे की alt, ctrl और shift आदि जिनके लिए ये event generate नहीं होता है। यदि आप सिर्फ ये देखना चाहते है की कोई भी keypress हुई है या नहीं तो इसके लिए आप onkeydown event को handle कर सकते है।
इस event का उदाहरण निचे दिया जा रहा है।
इस event के generate होने पर कई actions लिए जा सकते है जैसे की आप कोई message show कर सकते है या फिर कोई task initiate कर सकते है।
ये event सभी keys के लिए generate नहीं होता है। कुछ ऐसी keys भी है जैसे की alt, ctrl और shift आदि जिनके लिए ये event generate नहीं होता है। यदि आप सिर्फ ये देखना चाहते है की कोई भी keypress हुई है या नहीं तो इसके लिए आप onkeydown event को handle कर सकते है।
इस event का उदाहरण निचे दिया जा रहा है।
<html>
<head> <title>onkeypress Demo</title> <script> function keypressFunction() { document.bgColor="red"; } </script> </head> <body> <form> <input type="text" onkeypress="keypressFunction()"> </form> </body> </html> |
ऊपर दिए गए उदाहरण में जैसे ही user कोई keypress करता है तो keypressFunction() call होता है और document का background color red हो जाता है।
इस उदाहरण में यदि आप shift, ctrl और alt key press करते है तो event generate नहीं होता है। ये script निचे दिया गया output generate करती है।
onkeydown
User के keyboard से key press करने के दौरान ही onkeydown event generate होता है। इस event को onkeyup event के साथ use किया जाता है। ये event onkeypress event की तरह ही काम करता है लेकिन जैसा की मैने आपको पहले बताया onkeypress event सभी keys को detect नहीं कर पाता है।
यदि आप keyboard की हर key press को handle करना चाहते है तो इसके लिए आप onkeydown event ही handle करेंगे। इसका उदाहरण निचे दिया जा रहा है।
यदि आप keyboard की हर key press को handle करना चाहते है तो इसके लिए आप onkeydown event ही handle करेंगे। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head> <title>onkeydown</title> <script> function keydownFunction() { document.bgColor="green"; } </script> </head> <body> <form> <input type="text" onkeydown="keydownFunction()"> </form> </body> </html> |
ऊपर दिए गए उदाहरण में जब आप keyboard पर किसी भी key को press करते है तो onkeydown event generate होता है जो keydownFunction() को call करता है और document का background color green हो जाता है।
ये script निचे दिया गया output generate करती है।
ये script निचे दिया गया output generate करती है।
onkeyup
जब user key press करने के बाद उसे release करता है तो onkeyup event generate होता है। इस event को onkeydown के साथ use किया जाता है। इस event को आप कई प्रकार से handle कर सकते है। जैसे की आप text को uppercase में change कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head> <title>onkeyup Demo</title> <script> function keyupFunction(input) { input.style.color="red"; } </script> </head> <body> <form> <input type="text" id="t1" onkeyup="keyupFunction(this)"> </form> </body> </html> |
onkeydown & onkeyup Events Complete Example
निचे onkeydown और onkeyup events का एक साथ complete उदाहरण दिया जा रहा है। इस उदाहरण से आप इन दोनों को एक साथ handle करना सिख पाएंगे।
|
ऊपर दिए गए उदाहरण में जैसे ही user कोई keypress करता है तो keydownFunction() call होता है और document का background color black हो जाता है और जैसे ही user key को release करता है तो keyupFunction() call होता है और document का color फिर से white हो जाता है।
इन दोनों events के use का ये एक बहुत ही interesting उदाहरण है। ये script निचे दिया गया output generate करती है।
0 Comments