1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

Limiter le nombre de caractères avec Javascript

abdelouafiJan 7, 2017

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      295
      Likes Received:
      9
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      Exercice 1:
      Dans un formulaire HTML, il est possible d'ajouter une zone de texte qui contient un message à érire s'il sagit d'un formulaire de contact par exemple. souvent il est nécessaire de controler la saisie des utilisateurs, et donc il est utile parfois de limiter le nombre de caractères saisie sur chaque zone de texte.
      Pour cela :
      Développez une page HTML qui contient une zone de texte (textarea), ajouter alors le code javascript pour limiter le nombre de caractères saisies dans la zone de texte. Ce script doit aussi indiquer le nombre de caractères restant

      Exercice 2:
      Développez un système d'onglets utilisant l'(X)html, le CSS et le Javascript. L'avantage de Ce système est qu'il ne nécessite pas de recharger la page pour acceder à un autre onglet.
      A chaque fois qu'on clique sur un onglet, son contenu s'affiche. Le contenu des autres onglets sera caché
      onglet.png
      En utilisant HTML, CSS et Javascript développez cette page contenant des onglets?
       
      Loading...
      Exercice 1:
      HTML:
      <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Limiter le nombre de caractère dans un textarea</title>
          <script type="text/javascript">
              <!--
                  function maxlength_textarea(id, crid, max)
                  {
                      var txtarea = document.getElementById(id);
                      document.getElementById(crid).innerHTML=max-txtarea.value.length;
                      txtarea.onkeypress=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};
                      txtarea.onblur=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};
                      txtarea.onkeyup=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};
                      txtarea.onkeydown=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};
                  }
                  function v_maxlength(id, crid, max)
                  {
                      var txtarea = document.getElementById(id);
                      var crreste = document.getElementById(crid);
                      var len = txtarea.value.length;
                      if(len>max)
                      {
                          txtarea.value=txtarea.value.substr(0,max);
                      }
                      len = txtarea.value.length;
                      crreste.innerHTML=max-len;
                  }
              -->
              </script>
              </head>
              <body>
          <textarea id="textarea_1" cols="35" rows="4"></textarea><br />
          Il vous reste <span id="carac_reste_textarea_1"></span> caractères.
          <script type="text/javascript">
              <!--
                  maxlength_textarea('textarea_1','carac_reste_textarea_1',150);
              -->
          </script>
              </body>
      </html>

      Exercice 2:

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Un syst&egrave;me d'onglet en javascript</title>
          <script type="text/javascript">
              //<!--
                      function change_onglet(name)
                      {
                              document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                              document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                              document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                              document.getElementById('contenu_onglet_'+name).style.display = 'block';
                              anc_onglet = name;
                      }
              //-->
              </script>
          <style type="text/css">
              .onglet
              {
                      display:inline-block;
                      margin-left:3px;
                      margin-right:3px;
                      padding:3px;
                      border:1px solid black;
                      cursor:pointer;
              }
              .onglet_0
              {
                      background:#bbbbbb;
                      border-bottom:1px solid black;
              }
              .onglet_1
              {
                      background:#dddddd;
                      border-bottom:0px solid black;
                      padding-bottom:4px;
              }
              .contenu_onglet
              {
                      background-color:#dddddd;
                      border:1px solid black;
                      margin-top:-1px;
                      padding:5px;
                      display:none;
              }
              ul
              {
                      margin-top:0px;
                      margin-bottom:0px;
                      margin-left:-10px
              }
              h1
              {
                      margin:0px;
                      padding:0px;
              }
              </style>
      </head>
      <body>
              <div class="systeme_onglets">
              <div class="onglets">
                  <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
                  <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
                  <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
              </div>
              <div class="contenu_onglets">
                  <div class="contenu_onglet" id="contenu_onglet_quoi">
                      <h1>Quoi?</h1>
                      Un simple syst&egrave;me d'onglet utilisant les technologies:<br />
                      <ul>
                          <li>(X)html</li>
                          <li>CSS</li>
                          <li>Javascript</li>
                      </ul>
                  </div>
                  <div class="contenu_onglet" id="contenu_onglet_qui">
                      <h1>Qui?</h1>
                      C'est un script r&eacute;alis&eacute; par Ybouane,<br />
                      Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
                  </div>
                  <div class="contenu_onglet" id="contenu_onglet_pourquoi">
                      <h1>Pourquoi?</h1>
                      Pour simplifier la navigation et la diviser en parties
                  </div>
              </div>
          </div>
          <script type="text/javascript">
              //<!--
                      var anc_onglet = 'quoi';
                      change_onglet(anc_onglet);
              //-->
              </script>
      </body>
      </html>

Share This Page

Share