× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

React named keyboard codes

thubInanc Gumus
Nov 23, 2016
<p>I still see people use keycodes with React. You don't have to. You can enter "named keys" just like the example below:</p> <pre><span style="color:rgb(121, 93, 163)">handleKeyDown</span><span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(167, 29, 93)">function</span>(e) { <span style="color:rgb(167, 29, 93)">if</span> (e.key <span style="color:rgb(167, 29, 93)">===</span> <span style="color:rgb(24, 54, 145)">'Enter'</span>) { <span style="color:rgb(150, 152, 150)">// Handle enter key</span> } <span style="color:rgb(167, 29, 93)">else</span> <span style="color:rgb(167, 29, 93)">if</span> (e.key <span style="color:rgb(167, 29, 93)">===</span> <span style="color:rgb(24, 54, 145)">' '</span>) { <span style="color:rgb(150, 152, 150)">// Handle spacebar</span> } <span style="color:rgb(167, 29, 93)">else</span> <span style="color:rgb(167, 29, 93)">if</span> (e.key <span style="color:rgb(167, 29, 93)">===</span> <span style="color:rgb(24, 54, 145)">'ArrowLeft'</span>) { <span style="color:rgb(150, 152, 150)">// Handle left arrow</span> } }</pre> <p><strong>More key names can be found <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">here</a>.</strong></p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus