Skip to content
Flint
Blog

keyboardEventKeys

Prefer KeyboardEvent.key over deprecated properties like keyCode, charCode, and which.

✅ This rule is included in the browser logical presets.

The deprecated KeyboardEvent properties keyCode, charCode, and which provide numeric codes that are less readable and harder to maintain than the modern .key property. The .key property returns a string representation of the key pressed, making code more semantic and accessible.

Examples

Section titled “Examples”
72windAB0addEventListen5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dkeydo1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<, sp ansty="le--0:#D9F5DD;--1:#1111">1<1(sp ansty="le--0:#D7DBE0;--1:#403F">53eve1<1)sp ansty="le--0:#D6DEEB;--1:#403F">5<3 sp ansty="le--0:#C792EA;--1:#8844">AE<=>sp ansty="le--0:#D6DEEB;--1:#403F">53sp>< {d ivclassNa="meec-li">nt< sp ansty="le--0:#C792EA;--1:#8844">AE53< (sp ansty="le--0:#7FDBCA;--1:#096E">72eveA72keyCo5<3 sp ansty="le--0:#C792EA;--1:#8844">AE=<==sp ansty="le--0:#D6DEEB;--1:#403F">5<3 sp ansty="le--0:#F78C6C;--1:#AA09">82<13sp ansty="le--0:#D6DEEB;--1:#403F">53)< {d ivclassNa="meec-li">nt < sp ansty="le--0:#7FDBCA;--1:#096E">72consoAB0l5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4DEnter press1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<);d ivclassNa="meec-li">53< sp ansty="le--0:#D6DEEB;--1:#403F">5<3}d ivclassNa="meec-li">53}<);d ivclassNa="meec-li">d72documeAB0addEventListen5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dkeypre1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<, sp ansty="le--0:#D9F5DD;--1:#1111">1<1(sp ansty="le--0:#D7DBE0;--1:#403F">53eve1<1)sp ansty="le--0:#D6DEEB;--1:#403F">5<3 sp ansty="le--0:#C792EA;--1:#8844">AE<=>sp ansty="le--0:#D6DEEB;--1:#403F">53sp>< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72consoAB0l5<3(sp ansty="le--0:#7FDBCA;--1:#096E">72eveA72charCo53<);d ivclassNa="meec-li">53}<);d ivclassNa="meec-li">d72windAB0addEventListen5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dkey1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<, sp ansty="le--0:#D9F5DD;--1:#1111">1<1(sp ansty="le--0:#D7DBE0;--1:#403F">53eve1<1)sp ansty="le--0:#D6DEEB;--1:#403F">5<3 sp ansty="le--0:#C792EA;--1:#8844">AE<=>sp ansty="le--0:#D6DEEB;--1:#403F">53sp>< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72consoAB0l5<3(sp ansty="le--0:#7FDBCA;--1:#096E">72eveA72whi53<);d ivclassNa="meec-li">53}<);d ivclassNa="meco"><);d>
6E72wi4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dkey1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#D9F5DD;--1:#11">1<111( spans="tyle--0:#D7DBE0;--1:#40">3F53e1<111) spans="tyle--0:#D6DEEB;--1:#40">344 spans="tyle--0:#D6DEEB;--1:#40">3F><53 {divclass="Nameec-">de443F<53 ( spans="tyle--0:#7FDBCA;--1:#09">6E72e4<4AE. spans="tyle--0:#7FDBCA;--1:#09">6E7<2key spans="tyle--0:#D6DEEB;--1:#40">344A31<111" spans="tyle--0:#ECC48D;--1:#98">4E4DE1<111" spans="tyle--0:#D6DEEB;--1:#40">3F5<3) {divclass="Nameec-">dent< spans="tyle--0:#7FDBCA;--1:#09">6E72con4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B<0log spans="tyle--0:#D6DEEB;--1:#40">31<111" spans="tyle--0:#ECC48D;--1:#98">4E4DEnter pre1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53) ;divclass="Nameec-">3F<53 spans="tyle--0:#D6DEEB;--1:#40">33F5<3}) ;divclass="Nameec-">c6E72docu4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dkeyp1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#D9F5DD;--1:#11">1<111( spans="tyle--0:#D7DBE0;--1:#40">3F53e1<111) spans="tyle--0:#D6DEEB;--1:#40">344 spans="tyle--0:#D6DEEB;--1:#40">3F><53 {divclass="Nameec-">de6E72con4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B<0log spans="tyle--0:#D6DEEB;--1:#40">36E72e4<4AE. spans="tyle--0:#7FDBCA;--1:#09">6E7<2key spans="tyle--0:#D6DEEB;--1:#40">3F<53) ;divclass="Nameec-">3F5<3}) ;divclass="Nameec-">c6E72wi4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dk1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#D9F5DD;--1:#11">1<111( spans="tyle--0:#D7DBE0;--1:#40">3F53e1<111) spans="tyle--0:#D6DEEB;--1:#40">344 spans="tyle--0:#D6DEEB;--1:#40">3F><53 {divclass="Nameec-">de6E72con4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B<0log spans="tyle--0:#D6DEEB;--1:#40">36E72e4<4AE. spans="tyle--0:#7FDBCA;--1:#09">6E7<2key spans="tyle--0:#D6DEEB;--1:#40">3F<53) ;divclass="Nameec-">3F5<3}) ;divclass="Name"><})>

Options

Section titled “Options”

This rule is not configurable.

When Not To Use It

Section titled “When Not To Use It”

If you need to support very old browsers that do not implement KeyboardEvent.key (Internet Explorer 8 and below), you might need to continue using the deprecated properties. However, for modern web development, the .key property is widely supported and recommended.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”