How to use onkeyup in javascript to add text to a div that isn't a textbox?

Question

Let me start off saying that I am new to javascript.

I am trying to change a div's content to whatever letter I type in. So if I press "p" anywhere on the page, the div text will add that letter.

For example:

<html>
  <head>
    <script>
      document.getElementById("change").onkeyup = function() {myFunction()};

      function myfunction(){

      }
    </script>
  </head>
<body>
  <div id=change>p</div>
</body>
</html>

The function is where I am stuck.

I have seen a lot of examples involving typing in a textbox but none without one. If someone could guide me in the right direction, I would be very grateful.

Toastrackenigma · Answer 1 · 2017-08-02T05:33:14.043

Why does your code not work?

You can't use the keyup event on the <div> element as you have tried to do, because JavaScript will never fire it as the div is never focused. Elements have to be focused to receive keypress events, otherwise how would the user know where their keyboard was going to type to.

What can we do about that?

One element that always "has focus" is the <body> of the webpage (unless of course, you are using a different area of your web browser, such as bookmarking a site, navigating with the URL bar, etc).

So, we can detect the event on the body of the page, and then change the content of the div accordingly. We can detect the event using document.body.onkeyup = function(event), and then get change the div content using document.getElementById("change").innerHTML, which targets that div by it's ID, and then sets it's HTML value to something new.

However, JavaScript will only send back the code of the key that was pressed (it's internal representation of the key), not the character which the key represents - (this is actually useful if you are trying to detect if a key like backspace or ctrl has been pressed). We can get this value from the event using event.keyCode.

Thus, we will have to transform that into a string, which is the final piece of our code : String.fromCharCode(event.keyCode). This transforms a character code into a string.

All together, we can update the value of the div in response to a key press.

Working Example

document.body.onkeyup = function(event) {
  document.getElementById("change").innerHTML = String.fromCharCode(event.keyCode);
}

<div id="change">p</div>

Notes

You can use onkeypress rather that onkeyup if you want to detect the case of letters;
You can use += rather than = if you want to append what you have typed now to what is already in the div;
If you want to just use a div as a place where you can type, check out contenteditable;
If you want a list of keycodes that do not map to a string value, check out this list.

@clone You commented just as I finished editing in a link to it :P — Toastrackenigma, Aug 02 '17 at 05:14
Great structured answer. If you need additional keys that are not mapped by 'String.fromCharCode' (such as function keys), it looks like someone has compiled a decent list here: https://stackoverflow.com/a/23377822/4616759 ... — Brennen Sprimont, Aug 02 '17 at 05:27
@BrennenSprimont Thanks! I've added that list to my answer under the notes section. — Toastrackenigma, Aug 02 '17 at 05:34
Thank you for the answer! I seem to still have issues though. On the part of the function that says " = function(event) {" I get an error saying can't set property 'onkeypress' of null". — Jaron Gallo, Aug 02 '17 at 20:56
@JaronGallo Ah. Write `window.onload = function() {` in your JavaScript code, then copy-and-paste my answer in, then add a line after containing an extra `}`. This ensures that the window has loaded, and thus all of the HTML elements referenced on the page exist / can be accessed. — Toastrackenigma, Aug 02 '17 at 21:49

score 2 · Answer 2 · answered Aug 02 '17 at 05:09

If you want to add the letters as you press you can add use +=. Also onkeypress is case sensitive while onkeyup will give you capital letters.

document.body.onkeypress = function(event) {
  document.getElementById("change").innerHTML += String.fromCharCode(event.keyCode);
}

<div id="change">p</div>

How to use onkeyup in javascript to add text to a div that isn't a textbox?

2 Answers2

Why does your code not work?

What can we do about that?

Working Example

Notes