Geek Answers Handbook

How can you display text input speed using javascript or jQuery library?

I would like to add a print speed indicator just below the text box that we use in our contact form. It is just fun and give the user some interactivity with the page when they fill out the form.

It should display the average speed when typing and keep the last average value when keystrokes are inactive. When they leave the text box, the latter should stick.

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

[Edit] This was originally for several of my sites. But after I posted the question, it seemed to me that this would be a neat feature for SO. If you agree to vote here

+6
javascript
source share
4 answers

Here's a tested implementation that looks fine, but I don't guarantee 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>
+9
source share

Typing speed is usually calculated in words per minute minus a penalty for typos. For this, it seems to you that you will need a built-in spell checker, at least, plus some difficult positions for languages ​​and coding schemes. (And then it starts to get complicated when the clock starts, for example? What do you do with people who enter the code? How about copy and paste?)

+1
source share

This is my own participation in the ego:

 <textarea id="b" onblur="clc();"></textarea> <script> t=0; document.getElementById('b').onkeypress=function() { t==0 ? s=new Date() : e=new Date(); t=1; } function clc() { d = e.getTime() - s.getTime(); c = b.value.length; b.value += "\n"+c+"s in "+d+"ms: "+c/d+" cpms"; } </script>

I spent more than a week on this tutorial JavaScript from scratch (cutting and cutting). That would be a good starting point. Now it is so simple that a simple explanation is needed. You could add something to it. His most famous minimalist and purest form.

It just gives you everything in the text box: enter image description here

+1
source share

awfully simple, untested implementation:

 var lastrun = new Date(); textarea.onkeyup = function() { var words = textarea.value.split(' '); var minutes_since_last_check = somefunctiontogetminutesdifference(new Date(), lastrun); var wpm = (words.length-1)/minutes_since_last_check; //show the wpm in a div or something };
-one
source share

More articles:


All Articles