Append keystrokes to div JS

Question

I was wondering which, if any, framework would be the best to achieve capturing keystrokes and appending these to, say a "p" element. What I'm trying to achieve is having the client type something on the keyboard, and then have that sentence or whatever, appended to html, hereby displaying it in the "p" element.

Important notice; I'm not trying to call a function at a given keypress - ex. shift+alt, rather what I'm trying to do is, streaming the keyboardstrokes to an html element.

score 1 · Accepted Answer · answered Feb 13 '16 at 18:00

1

You don't necessarily need a framework for that task.

Another possbily viable option besides Kai Christensen's would be to create a textbox outside of the visible screen area, set the focus to this textbox automatically and create a change listener for the textbox.

You can then simply replace the content of the target element with the textbox's content whenever it changes.

This saves you the trouble of listening to keyboard events manually, distinguishing upper and lower case letters etc.

answered Feb 13 '16 at 18:00

TimoStaudinger

41,396
16
88
94

"_This saves you the trouble of listening to keyboard events manually, distinguishing upper and lower case letters etc_" - `document.body.addEventListener("keypress", function(e) { console.log(String.fromCharCode(e.which); })` ([fiddle](https://jsfiddle.net/epyw51jh/)) – Andreas Feb 13 '16 at 18:21
@Andreas Fair enough, upper & lower case works fine. You still run into trouble though when it comes to line breaks or backspace – TimoStaudinger Feb 13 '16 at 18:26

score 0 · Answer 2 · answered Feb 13 '16 at 17:58

I would definitely go with jQuery to capture the keys and then constantly .replace() your div with a div with the same properties that contains the latest version of the updating string. Codecademy has a great set of lessons for this type of jQuery use.

Not that I'm an expert, though. I'm sure someone else has a better answer than my own.

score 0 · Answer 3 · answered Feb 13 '16 at 18:20

Something like this?

Html

<p id="text"></p>
<input id="textinput"></input>

Js

//Register on keyup, append text from input-field to <p> element.
window.addEventListener("keyup", function () {
    document.getElementById("text").innerHTML=document.getElementById('textinput').value;
});

jsfiddle: https://jsfiddle.net/vwobq9xf/1/

Append keystrokes to div JS

3 Answers3