¿Cómo se puede mostrar la velocidad de escritura utilizando Javascript o la biblioteca jQuery?

Me gustaría agregar un indicador de velocidad de tipeo justo debajo del área de texto que usamos en nuestro formulario de contacto. Es solo por diversión y para darle al usuario cierta interactividad con la página mientras completa el formulario.¿Cómo se puede mostrar la velocidad de escritura utilizando Javascript o la biblioteca jQuery?

Debe mostrar la velocidad promedio mientras se escribe y mantener el último promedio cuando las teclas están inactivas. Cuando abandonen el área de texto, el último promedio debería mantenerse.

Idealmente, me gustaría tener un plugin jQuery si está disponible.

[Editar] esto fue originalmente para algunos de mis sitios web. Pero después de publicar la pregunta, me di cuenta de que esta sería una buena característica para SO. Si acepta vote here

Fuente

2008-10-03 Brian Boatright

Aquí hay una implementación probada, que parece estar bien, pero no garantizo las matemáticas.

una demo: http://jsfiddle.net/iaezzy/pLpx5oLf/

Y el código:

<?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>

Fuente

2008-10-03 17:09:37 enobrev

que es perfecto y con una demostración, ¡gracias! –

¿Querías hacer de esto una respuesta wiki? Seguramente mereces algunos puntos de reputación por esta respuesta detallada. –

No estaba seguro de qué era la respuesta wiki. – enobrev

La velocidad de escritura generalmente se calcula en palabras por minuto menos una penalización por errores tipográficos. Para hacer esto, parece que necesitarías un corrector ortográfico en línea al menos, además de algunos trabajos pesados para idiomas y esquemas de codificación. (Y luego comienza a complicarse, ¿cuándo comienza el reloj, por ejemplo? ¿Qué haces con las personas que están ingresando el código? ¿Qué hay sobre copiar y pegar?)

Fuente

2008-10-03 16:41:37

cierto. Mi intención original era usarlo en un formulario de contacto, por lo que no habrá problemas de código o copiar/pegar como lo hay para SO. –

-1

es horriblemente simple, no probado implementación :

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 
};

Fuente

2008-10-03 16:48:02 Jared

Es mi propia implicación del 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>

Me pasé más de una semana en este JavaScript aprender de cero (corte y corte). Este será un buen punto de partida. Ahora es tan simple que necesita una explicación simple. Puedes agregarle algo. Es la forma más pura y minimalista conocida.

Simplemente le da todas en un área de texto: enter image description here

Fuente

2014-04-07 09:37:39 Xsi

¡Esto es genial! Especialmente teniendo en cuenta que aprendiste JS para esto :) El único inconveniente es que si haces clic con el mouse accidentalmente fuera del área de texto, se estropea. –

¿Cómo se puede mostrar la velocidad de escritura utilizando Javascript o la biblioteca jQuery?

Respuesta

Cuestiones relacionadas