Comment pouvez-vous afficher Vitesse de frappe en utilisant Javascript ou la bibliothèque jQuery?

Je voudrais ajouter un indicateur de vitesse de frappe juste en dessous de la zone de texte que nous utilisons sur notre formulaire de contact. C'est juste pour le plaisir et pour donner à l'utilisateur une certaine interactivité avec la page pendant qu'ils remplissent le formulaire.Comment pouvez-vous afficher Vitesse de frappe en utilisant Javascript ou la bibliothèque jQuery?

Il devrait afficher la vitesse moyenne tout en tapant et garder la dernière moyenne lorsque les frappes au clavier sont inactifs. Quand ils quittent la zone de texte, la dernière moyenne devrait coller.

Idéalement, je voudrais avoir un plugin jQuery s'il est disponible.

[Éditer] C'était à l'origine pour juste quelques uns de mes sites Web. Mais après avoir posté la question, il m'a semblé que ce serait une fonctionnalité intéressante pour SO. Si vous êtes d'accord vote here

Source

2008-10-03 Brian Boatright

Voici une implémentation testée, ce qui semble correct, mais je ne garantis pas les maths.

A Démo: http://jsfiddle.net/iaezzy/pLpx5oLf/

Et le 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>

Source

2008-10-03 17:09:37 enobrev

c'est parfait et avec une démo, merci! –

vouliez-vous dire que c'était une réponse wiki? Vous méritez sûrement quelques points de rep pour cette réponse détaillée. –

Je ne savais pas exactement ce que le wiki répondait. – enobrev

La vitesse de frappe est généralement calculée en mots par minute moins une pénalité pour les fautes de frappe. Pour ce faire, il semble que vous ayez besoin d'un vérificateur d'orthographe en ligne au minimum, plus un peu de manipulation pour les langages et les schémas d'encodage. (Et puis ça commence à se compliquer, quand l'horloge commence-t-elle, par exemple? Que faites-vous des gens qui entrent du code?) Que diriez-vous de copier-coller?)

Source

2008-10-03 16:41:37

vrai. mon intention initiale était de l'utiliser sur un formulaire de contact afin qu'il n'y ait pas ces problèmes de code ou de copier/coller comme c'est le cas pour SO. –

-1

un horriblement simple, non testé :

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

Source

2008-10-03 16:48:02 Jared

Il est mon propre ego implication:

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

J'ai passé plus d'une semaine sur ce JavaScript apprentissage de zéro (coupe et Coupe). Ce sera un bon point de départ. C'est maintenant si simple qu'il faut une explication simple. Vous pouvez ajouter quelque chose à cela. C'est la forme minimaliste et pure la plus connue.

Il vous donne juste tout dans une zone de texte: enter image description here

Source

2014-04-07 09:37:39 Xsi

C'est génial! D'autant que vous avez appris JS pour cela :) Le seul inconvénient est, si vous cliquez sur votre souris accidentellement en dehors de la zone de texte, puis il se faufile. –

Comment pouvez-vous afficher Vitesse de frappe en utilisant Javascript ou la bibliothèque jQuery?

Répondre

Questions connexes