Médiaforma

Guide de survie – Les éléments interactifs

Print Friendly, PDF & Email

Version résumée et étendue d’un texte

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Balises details et summary</title>
  </head>
  <body>
    <details>
      <summary>En savoir plus</summary>
      <p>Vous en saurez plus sur le référencement en vous rendant sur le site http://www.monsite.com.</p>
     </details>
  </body>
</html>

Eléments éditables

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Eléments éditables</title>
    <style>
      div
      {
        border: dotted 1px #666;
        padding: 5px 10px;
        margin-top: 40px;
        margin-bottom: 40px;
      }
    </style>
    <script>
      function traitement()
      {
         var contenu = document.getElementById('texte-editable').innerHTML;
         document.getElementById('cible').innerHTML = 'Texte lu dans la div : ' + contenu;
      }
    </script>
  </head>
  <body>
    <div id="texte-editable" contenteditable="true">Le texte de cette div peut être modifié</div>
    <button onclick="traitement()">Cliquez ici pour accéder au texte de la div</button>
    <div id="cible"></div>
  </body>
</html>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Bjr, votre livre est sympa, j’ai cependant quelques remarques. (je ne connais pas Jv) Mais dans cet exemple si l’utilisateur tape \\root cela ne pose t’il pas quelques soucis ?!

Bonjour Laurent1133,

Pour vous répondre, j’ai besoin de précisions. De quel code parlez-vous ?
Il y en a 3 dans la section “Eléments interactifs”.

A bientôt.