Javascript Timer- Start when Typing Detected

Question

I want to make a js timer that starts when typing is detected in a certain html input box. The timer does not need to be displayed on the webpage, or need to be in js. Preferably it should record in seconds.

Edit

I seem to have forgotten to ask the question. The question is how do I make the timer?

Thanks, David

Answer 1

First you need to think about time past.

A common logical way to do this is as so:

1) User presses a key - set time of "now" to a variable lets say "start".
2) User stops typing  - compare "now" to "start" to get time passed.

You can use something like this for time: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

So how do we detect a user pressed a key:

Now for typing you can use something called an event listener.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

The idea of an event listener is it listens to actions a user does and then calls a specified function. There are lots of events pre-made in javascript in the documentation but i'll save you the trouble of googling, here is the complete list of events you can use:

https://developer.mozilla.org/en-US/docs/Web/Events

Hint: keypress, keydown and keyup might be of interest to you here.

But every letter the user types will involve a keydown and keyup and a keypress. So to signify the "end" of the user typing his or her sentence you might want ot listen to a specific button on the keyboard - perhaps the enter key. Once that button is pressed then you compare the time elapsed as enter key would signify the end of the input.

So once you set up the listeners to listen for specific actions from the user - you will want that event listener to call a function that compares time elapsed using basic mathematics of your two time stamps, then print that time elapsed on screen.