Home/ Questions/Q 51407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T16:44:44+00:00

I would like to add a typing speed indicator just below the textarea we

  • 0

I would like to add a typing speed indicator just below the textarea we use on our contact form. It is just for fun and to give the user some interactivity with the page while they are completing the form.

It should display the average speed while typing and keep the last average when the keystrokes are idle. When they leave the textarea the last average should stick.

Ideally I would like to have a jQuery plugin if it is available.

[Edit] this was originally for just a few of my websites. But after I posted the question it struck me how this would be a neat feature for SO. If you agree vote here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Here’s a tested implementation,which seems ok, but I don’t guarantee the math.

    A Demo: http://jsfiddle.net/iaezzy/pLpx5oLf/

    And the code:

    <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'>     <head>         <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />         <title>Type Speed</title>         <script type='text/javascript' src='js/jquery-1.2.6.js'></script>         <style type='text/css'>             form {                 margin: 20px auto;                 width: 500px;             }              #textariffic {                 width: 400px;                 height: 400px;                 font-size: 12px;                 font-family: monospace;                 line-height: 15px;             }         </style>         <script type='text/javascript'>             $(function() {                 $('textarea')                     .keyup(checkSpeed);             });              var iLastTime = 0;             var iTime = 0;             var iTotal = 0;             var iKeys = 0;              function checkSpeed() {                 iTime = new Date().getTime();                  if (iLastTime != 0) {                     iKeys++;                     iTotal += iTime - iLastTime;                     iWords = $('textarea').val().split(/\s/).length;                     $('#CPM').html(Math.round(iKeys / iTotal * 6000, 2));                     $('#WPM').html(Math.round(iWords / iTotal * 6000, 2));                 }                  iLastTime = iTime;             }          </script>     </head>     <body>         <form id='tipper'>             <textarea id='textariffic'></textarea>             <p>                 <span class='label'>CPM</span>                 <span id='CPM'>0</span>             </p>             <p>                 <span class='label'>WPM</span>                 <span id='WPM'>0</span>             </p>         </form>     </body> </html>
    • 0