JavaScript விசைப்பலகை நிகழ்வுகள்
பயனர் விசைப்பலகையில் ஒரு விசையை அழுத்தும் போது விசைப்பலகை நிகழ்வுகள் நடக்கும்:
- keydown (விசை அழுத்தப்படுகிறது)
- keyup (விசை விடப்படுகிறது)
- keypress (பழையது)
குறிப்பு:
keypress எழுத்து விசைகளுக்கு மட்டுமே (a அல்லது 5) தூண்டுகிறது, கட்டுப்பாட்டு விசைகளுக்கு (alt அல்லது backspace) அல்ல.
டெவலப்பர்கள் keydown அல்லது keyup ஐப் பயன்படுத்த அறிவுறுத்தப்படுகிறார்கள்.
The keydown நிகழ்வு
event.key ஐப் பயன்படுத்துதல்
எடுத்துக்காட்டு
எந்த விசை அழுத்தப்பட்டது எனக் காட்டு:
<input id="k" type="text" placeholder="Press a key">
<p id="demo"></p>
<script>
const k = document.getElementById("k");
// Let k listen for keydown
k.addEventListener("keydown", function (event) {
// Then display the event.key
document.getElementById("demo").innerHTML = "You pressed: " + event.key;
});
</script>ஊடாடும் விசைப்பலகை ஆர்ப்பாட்டம்
உங்கள் விசைப்பலகையைச் சோதிக்கவும்:
மாற்றி விசைகள்:
விசை பண்புகள்
KeyboardEvent பொருள் நிகழ்வில் எந்த விசை ஈடுபட்டிருந்தது என்பதைத் தீர்மானிக்க பயனுள்ள பண்புகளை வழங்குகிறது:
| பண்பு | விளக்கம் | Z ஐ அழுத்தும்போது |
|---|---|---|
| event.key | விசையின் மதிப்பைத் திருப்பித் தருகிறது. மொழி அமைப்புகளைப் பொறுத்து மாறுபடலாம். | z ஐத் திருப்பித் தருகிறது (அல்லது Shift பிடிக்கப்பட்டால் Z) |
| event.code | விசைக் குறியீட்டைத் திருப்பித் தருகிறது. மொழி அமைப்புகளைப் பொருட்படுத்தாமல் மாறாமல் இருக்கும். | எப்போதும் "KeyZ" ஐத் திருப்பித் தருகிறது |
குறிப்பு:
நீங்கள் event.ctrlKey, event.shiftKey, event.altKey, மற்றும் event.metaKey போன்ற பண்புகளைப் பயன்படுத்தி மாற்றி விசைகளைக் கண்டறியலாம், மேலும் விசை சேர்க்கைகளைச் செயல்படுத்தலாம் (எ.கா., Ctrl + S).
Enter ஐக் கண்டறிதல்
event.code ஐப் பயன்படுத்துதல்
<input id="in01" type="text" placeholder="Press Enter">
<p id="demo"></p>
<script>
const in01 = document.getElementById("in01");
// Let in01 listen for keydown
in01.addEventListener("keydown", function (event) {
// If event.code was "enter", then display text
if (event.code === "Enter") {
document.getElementById("demo").innerHTML = "Enter was pressed!";
}
});
</script>Enter விசை சோதனை:
event.key vs event.code
event.key
மொழி-சார்ந்தது
உண்மையான எழுத்து/சின்னத்தைத் தருகிறது
"a", "A", "अ", "あ"
Shift, CapsLock ஆகியவற்றின் விளைவைக் காட்டுகிறது
event.code
மொழி-சார்பற்றது
இயற்பியல் விசை இடத்தைத் தருகிறது
"KeyA", "Digit1", "Space"
குறிப்பிட்ட விசைப்பலகை வடிவத்திற்கு சரிசெய்யப்பட்டது
விசை மதிப்புகளின் எடுத்துக்காட்டுகள்:
| விசை | event.key | event.code |
|---|---|---|
| A | "a" அல்லது "A" | "KeyA" |
| 1 | "1" அல்லது "!" | "Digit1" |
| Enter | "Enter" | "Enter" |
| Space | " " | "Space" |
| Shift | "Shift" | "ShiftLeft" / "ShiftRight" |
விசைப்பலகை குறுக்குவழிகள்
பொதுவான குறுக்குவழிகளைச் சோதிக்கவும்:
குறுக்குவழி குறிப்புகள்:
- Ctrl+C, Ctrl+X, Ctrl+V - நகல், வெட்டு, ஒட்டு
- Ctrl+Z, Ctrl+Y - மீளமை, மீண்டும் செய்
- Ctrl+S - சேமி
- Ctrl+F - கண்டுபிடி
- Ctrl+A - அனைத்தையும் தேர்ந்தெடு
- Alt+Tab - பயன்பாடுகளுக்கிடையே மாறவும்
சுருக்கம்
JavaScript விசைப்பலகை நிகழ்வுகளை வழங்குகிறது, இது விசைப்பலகையிலிருந்து பயனர் உள்ளீட்டைக் கண்டறிந்து கையாள உதவுகிறது, இது படிவ சரிபார்ப்பு, விளையாட்டுக் கட்டுப்பாடுகள் மற்றும் விசைப்பலகை குறுக்குவழிகள் போன்ற ஊடாடும் வலை அனுபவங்களை இயலுமைப்படுத்துகிறது.
விளையாட்டுகள்
WASD அல்லது அம்புக்குறி விசைகளைப் பயன்படுத்தி எழுத்துகளை நகர்த்தவும்
படிவங்கள்
Enter விசையை அழுத்தி படிவங்களைச் சமர்ப்பிக்கவும், Tab விசையைப் பயன்படுத்தி புலங்களுக்கு இடையே நகரவும்
குறுக்குவழிகள்
பயன்பாட்டு குறுக்குவழிகளைச் செயல்படுத்தவும் (Ctrl+S, Ctrl+C, போன்றவை)
தேடல்
Ctrl+F உடன் தேடலைத் தொடங்கவும், Esc உடன் மூடவும்