JS Keyboard Keycodes

Developer
Manz
Size
4,747 Kb
Views
6,072
  1. JS Keyboard Keycodes Previews
  2. JS Keyboard Keycodes HTML Codes
  3. JS Keyboard Keycodes CSS Codes
  4. JS Keyboard Keycodes JS Codes

How do I make an js keyboard keycodes?

Interactive Javascript keyCodes keyboard with HTML5 / CSS3 / JS. Keyboard with Flexbox CSS3.. What is a js keyboard keycodes? How do you make a js keyboard keycodes? This script and codes were developed by Manz on 18 January 2023, Wednesday.

JS Keyboard Keycodes Previews
IQ Test

JS Keyboard Keycodes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Keyboard Keycodes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="title"> <img id="logo" src="http://lenguajejs.com/img/logojs.png" alt="JS"> <div> <h1>Javascript Keycodes</h1> <p><a href="http://lenguajejs.com/">http://lenguajejs.com/</a> · <a href="https://twitter.com/Manz">@Manz</a></p> <p class="text">Último keyCode pulsado: <span id="keycode"></span></p> </div>
</div>
<div id="keyb"> <div id="fk"> <div class="esc key" data-key="27"></div> <div class="f1 key" data-keydis="112"></div> <div class="f2 key" data-key="113"></div> <div class="f3 key" data-key="114"></div> <div class="f4 key" data-key="115"></div> <div class="f5 key" data-key="116"></div> <div class="f6 key" data-key="117"></div> <div class="f7 key" data-key="118"></div> <div class="f8 key" data-key="119"></div> <div class="f9 key" data-key="120"></div> <div class="f10 key" data-key="121"></div> <div class="f11 key" data-key="122"></div> <div class="f12 key" data-key="123"></div> <div class="ps key" data-key="44"></div> <div class="sl key"></div> <div class="pau key" data-key="19"></div> </div> <div id="central"> <div id="alnum"> <div class="islash key" data-key="220"></div> <div class="n1 key" data-key="49"></div> <div class="n2 key" data-key="50"></div> <div class="n3 key" data-key="51"></div> <div class="n4 key" data-key="52"></div> <div class="n5 key" data-key="53"></div> <div class="n6 key" data-key="54"></div> <div class="n7 key" data-key="55"></div> <div class="n8 key" data-key="56"></div> <div class="n9 key" data-key="57"></div> <div class="n0 key" data-key="48"></div> <div class="comma key" data-key="219"></div> <div class="inter key" data-key="221"></div> <div class="backspace key" data-key="8"></div> <div class="tab key" data-key="9"></div> <div class="q key" data-key="81"></div> <div class="w key" data-key="87"></div> <div class="e key" data-key="69"></div> <div class="r key" data-key="82"></div> <div class="t key" data-key="84"></div> <div class="y key" data-key="89"></div> <div class="u key" data-key="85"></div> <div class="i key" data-key="73"></div> <div class="o key" data-key="79"></div> <div class="p key" data-key="80"></div> <div class="ticks key" data-key="186"></div> <div class="plus key" data-key="187"></div> <div class="enter key" data-key="13"></div> <div class="capslock key" data-key="20"></div> <div class="a key" data-key="65"></div> <div class="s key" data-key="83"></div> <div class="d key" data-key="68"></div> <div class="f key" data-key="70"></div> <div class="g key" data-key="71"></div> <div class="h key" data-key="72"></div> <div class="j key" data-key="74"></div> <div class="k key" data-key="75"></div> <div class="l key" data-key="76"></div> <div class="ñ key" data-key="192"></div> <div class="obrace key" data-key="222"></div> <div class="cbrace key" data-key="191"></div> <div class="lshift key" data-key="16"></div> <div class="lt key" data-key="226"></div> <div class="z key" data-key="90"></div> <div class="x key" data-key="88"></div> <div class="c key" data-key="67"></div> <div class="v key" data-key="86"></div> <div class="b key" data-key="66"></div> <div class="n key" data-key="78"></div> <div class="m key" data-key="77"></div> <div class="comma key" data-key="188"></div> <div class="dot key" data-key="190"></div> <div class="dash key" data-key="189"></div> <div class="rshift key" data-key="16"></div> <div class="lctrl key" data-key="17"></div> <div class="alt key" data-key="18"></div> <div class="space key" data-key="32"></div> <div class="altgr key" data-key="18"></div> <div class="rctrl key" data-key="17"></div> </div> <!-- alnum --> <div id="midpad"> <div id="dirpad"> <div class="ins key" data-key="45"></div> <div class="home key" data-key="36"></div> <div class="pup key" data-key="33"></div> <div class="del key" data-key="46"></div> <div class="end key" data-key="35"></div> <div class="pdown key" data-key="34"></div> </div> <!-- dirpad --> <div id="cursorspad"> <div class="up key" data-key="38"></div> <div class="left key" data-key="37"></div> <div class="down key" data-key="40"></div> <div class="right key" data-key="39"></div> </div> <!-- cursorspad --> </div> <!-- midpad --> <div id="numpad"> <div class="numlock key" data-key="144"></div> <div class="slash key" data-key="111"></div> <div class="star key" data-key="106"></div> <div class="minus key" data-key="109"></div> <div class="np7 key" data-key="103"></div> <div class="np8 key" data-key="104"></div> <div class="np9 key" data-key="105"></div> <div class="more key" data-key="107"></div> <div class="np4 key" data-key="100"></div> <div class="np5 key" data-key="101"></div> <div class="np6 key" data-key="102"></div> <div class="np1 key" data-key="97"></div> <div class="np2 key" data-key="98"></div> <div class="np3 key" data-key="99"></div> <div class="intro key" data-key="13"></div> <div class="np0 key" data-key="96"></div> <div class="npdot key" data-key="110"></div> </div> <!-- numpad --> </div> <!-- central -->
</div> <script src="js/index.js"></script>
</body>
</html>

JS Keyboard Keycodes - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body { background: -webkit-linear-gradient(308deg, #CCC, #66C); background: linear-gradient(142deg, #CCC, #66C); height: 100vh;
}
#title { width: 650px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
#logo { width: 128px; margin: 25px 25px 0 0;
}
h1 { font-family: Montserrat; font-weight: 700; font-size: 42px; margin-bottom: 0;
}
h1 + p { font-family: Montserrat; font-weight: 700; font-size: 24px; margin: 0;
}
h1 + p a { color: #33A;
}
h1 + p a:hover { color: #A33;
}
.text { font-family: Montserrat; color: #555;
}
#keyb { width: 995px; height: 280px; margin: 3em auto; background: #AAA; padding: 20px; box-shadow: 2px 2px 5px rgba(25, 25, 25, 0.75);
}
.key { width: 32px; height: 32px; background: #777; margin: 5px; border-top: 1px solid #555; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); color: #FFF; text-align: center; font-family: Consolas; font-size: 16px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.active { background: red; -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); -webkit-transition: all .2s ease; transition: all .2s ease;
}
.active::after { content: attr(data-key); color: white;
}
#fk { display: -webkit-box; display: -ms-flexbox; display: flex;
}
#fk .f1,
#fk .f5,
#fk .f9,
#fk .ps { margin-left: 30px;
}
#central { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
#alnum { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 25px; width: 620px;
}
#alnum .backspace { width: 64px;
}
#alnum .tab { width: 48px;
}
#alnum .enter { width: 42px; /*height:75px; position:absolute;*/ -webkit-transform: translate(6px, 21px) scaleY(2.32); transform: translate(6px, 21px) scaleY(2.32); /*&::before { content:" "; background:#777; display:block; width:42px; height:32px; position:relative; left:-10px; z-index:-1; }*/
}
#alnum .capslock { width: 56px;
}
#alnum .lshift { width: 66px;
}
#alnum .rshift { width: 72px;
}
#alnum .lctrl,
#alnum .alt,
#alnum .altgr,
#alnum .rctrl { width: 46px;
}
#alnum .lctrl,
#alnum .altgr { margin-right: 36px;
}
#alnum .space { width: 322px;
}
#midpad { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 25px 0 0 25px; width: 140px;
}
#midpad #dirpad,
#midpad #cursorspad { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap;
}
#midpad #cursorspad .up { margin: 48px 48px 5px 48px;
}
#numpad { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 25px 0 0 26px; width: 175px;
}
#numpad .more,
#numpad .intro { -webkit-transform: scaleY(2.3) translateY(9px); transform: scaleY(2.3) translateY(9px);
}
#numpad .np6 { margin-right: 25px;
}
#numpad .np0 { width: 74px;
}

JS Keyboard Keycodes - Script Codes JS Codes

keycode = document.querySelector('#keycode')
window.addEventListener('keydown', function(e) { key = document.querySelector('.key[data-key="'+e.keyCode+'"]'); if (key) key.classList.add('active'); keycode.textContent = e.code + ' (' + e.keyCode + '): ' + e.key; e.preventDefault();
});
window.addEventListener('keyup', function(e) { key = document.querySelector('.key[data-key="'+e.keyCode+'"]'); if (key) key.classList.remove('active');
});
JS Keyboard Keycodes - Script Codes
JS Keyboard Keycodes - Script Codes
Home Page Home
Developer Manz
Username manz
Uploaded January 18, 2023
Rating 3
Size 4,747 Kb
Views 6,072
Do you need developer help for JS Keyboard Keycodes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Manz (manz) Script Codes
Name
Javascript Thug Life
Fallout 4 - Logo screen
A Pen by Manz
Space Invaders SVG icon
CSS Responsive Hamburger menu
Camera Snapshot Emulator
Battery API JS
CSS Instagram
CSS Shine logo
Chuck Norris Background
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!