Compteur de mots

Coucou

Pour certains concours ou même dans des RPs, il est nécessaire d'avoir un nombre de mots minimum ou maximum pour que notre message soit "valide". Je te propose ici un code que tu pourras mettre dans les codes HTML de ton forum et qui fera le travail pour tes membres (chouette hein :p).


Voici à quoi ressemble la page :

Tu peux le voir "en vrai" juste ici.


Et voici le code à copier/coller dans une page HTML de ton forum. N'oublie pas de cocher "oui" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?".

Code:

<style type="text/css">
   /*** --- Mise en page formulaire --- ***/

   .miettes-formulaire h1{
      color : #4e453e;
        font-size: 30px;
        line-height: 35px;
        margin-bottom: 10px;
        padding-bottom: 5px;
        position: relative;
   }

   .miettes-formulaire h1::after{
      position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 6px;
        content: "";
        background: #620019;
   }

   .miettes-formulaire .flex{
      display: flex;
      align-items: flex-start;
       align-content: space-between;
   }

   .miettes-formulaire .flex > div {
       flex: 0 0 20%;
       max-width: 20%;
   }
   
    .miettes-formulaire .flex > div:first-child {
       flex: 0 0 80%;
       max-width: 80%;
   }

   .miettes-formulaire hr {
       border: 0 none #51504d;
       border-top: 1px solid #51504d;
       clear: both;
       display: block;
       height: 1px;
       margin: 5px auto;
       width: 80%
   }

   .miettes-formulaire a{
       color: #a01a3d;
       text-decoration: none;
   }

   .miettes-formulaire a:hover {
       color: #24060e;
       cursor: pointer;
       text-decoration: underline;
   }

   .miettes-formulaire textarea{
        background: #ddd;
        border: 1px solid #999;
        box-sizing: border-box;
      height: 200px;
        padding: 4px;
      width: 98%;
   }

    .miettes-formulaire .mea{
      color: #dc1c4d;
      font-weight: bold;
   }
   
    .miettes-formulaire .txt-small{
        font-size: 11px;
        font-style: italic;
    }
   
    .miettes-formulaire input[type="button"]{
        background: #999;
        border: 1px solid #fff;
        color: #fff;
        font-weight: bold;
        height: 36px;
        line-height: 36px;
        padding: 0 15px;
        text-align: center;
  }
   
    .miettes-formulaire input[type="button"]:hover:not(:disabled){
        background: #fff;
        border: 1px solid #999;
        color: #999;
  }
   
    .miettes-formulaire input[type="button"]:disabled{
        cursor: default;
        opacity: .3;
    }
   
    /* Copyright */
      .ls-ccp{
        color: #999;
        display: block;
        font-size: 11px;
        font-style: italic;
        margin: auto;
        text-shadow: #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px;
        text-align: center;
        width: 98%;
      }

      .ls-ccp a{
        color: #000;
        text-decoration: none;
      }

      .ls-ccp a:hover{
        color: #999;
        text-decoration: underline;
      }

</style>

<div class="miettes-formulaire"  ng-app="angularApp" ng-controller="appController as app" ng-cloak>
   <h1>Compteur de mots</h1>

    <p>Tu as écrit un texte et tu as besoin de savoir combien de "vrais" mots<span class="mea">*</span> celui-ci contient ? Copie-colle ton texte ci-dessous, clique sur valider et laisse ton navigateur compter pour toi :)</p>
   
    <p class="txt-small"><span class="mea">*</span> c'est-à-dire des mots de plus de 3 lettres.</p>

    <div class="flex">
        <div>
            <textarea ng-model="textToCount" data-ng-click="showNbWords = false" placeholder="Mettre ton texte ici"></textarea>
            <p data-ng-show="showNbWords">⇨ Tu as écrit <strong>{{nbWords}} mots</strong> de plus de 3 lettres.</p>
        </div>
        <div>
            <input type="button" data-ng-disabled="textToCount.length == null || textToCount.length <= 3" value="Compter" ng-click="count(textToCount);"/>
        </div>
      
    </div>

        <span class="ls-ccp">Compteur proposé par ©<a href="http://tambouille-raleuses.forumactif.com/u1" target="_blank">Miettes</a></span>
   

<!-- Bibliothèque Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" language="Javascript" type="text/javascript"></script>
<!-- Module bbcode -->
<script src="http://tambouille-raleuses.forumactif.com/16544.js" type="text/javascript"></script>

<script language="Javascript" type="text/javascript">
    var app = angular.module("angularApp", ['bbModule']);
   app.controller("appController", function($scope, $sce){
        $scope.showNbWords = false;
       
        $scope.count = function(value){
            var listWords = value.split(' '),
                nbWords = 0;
           
            for(var i = 0 ; i < listWords.length ; i++){
                if(listWords[i].length > 3){
                    nbWords ++;
                }
            }
           
            $scope.nbWords = nbWords;
            $scope.showNbWords = true;
           
            return [$scope.nbWords, $scope.showNbWords];
        }
      
   });

   app.filter('html', function($sce) {
       return function(val) {
           return $sce.trustAsHtml(val);
       };
   });

   app.filter('noguillemet', function($sce) {
       return function(val) {
           return val.replace(/"/g, '\\"');
       };
   });

   app.filter('retourChariot', function($sce){
       return function(val){
         return val.replace(/\n/g, "<br />");
       };
    });

    app.filter('replaceBr', function($sce){
       return function(val){
         var reg = new RegExp("<br />", "ig");
         res = val.replace(reg, "\n");
         return res;
       };
     });

   // Sélectionner tout
   app.directive('selectOnClick', ['$window', function ($window) {
       return {
           restrict: 'A',
           link: function (scope, element, attrs) {
               element.on('click', function () {
                   if (!$window.getSelection().toString()) {
                       // Required for mobile Safari
                       this.setSelectionRange(0, this.value.length)
                   }
               });
           }
       };
   }]);

</script>

Merci de ne pas retirer le ©.

Si tu as un souci avec ce code, n'hésite pas à nous demander un coup de pouce (notamment si tu n'arrives pas à modifier la mise en page).

A bientôt pour d'autres astuces pour te simplifier la vie