How to only get the key pressed inside a div?

Question

I am trying to get the key pressed inside a div. But I am not sure how to just get the key pressed. Currently as I try to press the key nothing happens.

The way I am doing is.

<div contenteditable="true" id="d"> </div>

<p id="log"></p>


const input = document.querySelector('input');
const log = document.getElementById('log');

document.getElementById("d").addEventListener("onkeyup", logKey)

function logKey(e) {
   log.textContent += ` ${e.code}`;
}

Here is also the jsfiddle corresponding to it: https://jsfiddle.net/hpeLqmyg/

How could I do this?

Duplicate of https://stackoverflow.com/questions/10722589/how-to-bind-keyboard-events-to-div-elements — Will, May 15 '19 at 11:25
Possible duplicate of [How to bind keyboard events to div elements?](https://stackoverflow.com/questions/10722589/how-to-bind-keyboard-events-to-div-elements) — Will, May 15 '19 at 11:25

score 2 · Answer 1 · answered May 15 '19 at 11:21

2

change onkeyup to keyup

document.getElementById("d").addEventListener("keyup", logKey)

https://jsfiddle.net/2x8pcu0m/

answered May 15 '19 at 11:21

Lev Buchel

532
5
14

How to get the key pressed? `e.code` gives the keys in uppercase – Amanda May 15 '19 at 11:48
Please check this: https://stackoverflow.com/questions/12568494/keyup-event-always-return-uppercase-letter – Lev Buchel May 15 '19 at 11:59

Syed mohamed aladeen · Answer 2 · 2019-05-15T11:51:56.020

0

Try this, you have a mistake in your code.

replace onkeyup with just keyup

const input = document.querySelector('input');
const log = document.getElementById('log');

document.getElementById("d").addEventListener("keyup", logKey)

function logKey(e) {
   log.textContent += e.code;
}

#d {
  width:50%;
  color:red;
  background-color: yellow;
}

<div contenteditable="true" id="d"> </div>

<p id="log"></p>

edited May 15 '19 at 11:51

answered May 15 '19 at 11:25

Syed mohamed aladeen

6,507
4
32
59

brk · Answer 3 · 2019-05-15T11:59:38.060

0

Change onkeyup tokeyup

const log = document.getElementById('log');

document.getElementById("d").addEventListener("keyup", logKey)

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

<div contenteditable="true" id="d"> </div>

<p id="log"></p>

You can also use e.key instead of code

const log = document.getElementById('log');

document.getElementById("d").addEventListener("keyup", logKey)

function logKey(e) {
  log.textContent += ` ${e.key}`;
}

div {
  border: 1px solid red;
}

<div contenteditable="true" id="d"> </div>

<p id="log"></p>

edited May 15 '19 at 11:59

answered May 15 '19 at 11:26

brk

48,835
10
56
78

How to just get the key pressed? For example `e.code` always gives the typed character in uppercase – Amanda May 15 '19 at 11:49
You want in lower case? What is the expected result? – brk May 15 '19 at 11:50
I want to get the key pressed. If I press `s` then I expect `s`. If I press `S` , I expect `S` – Amanda May 15 '19 at 11:54

How to only get the key pressed inside a div?

3 Answers3