Script selection : Gestion et manipulation de la s駘ection
Partie II : L'interactivité
Edition 1 | Chapitre 12 : Manipuler le document / Page 186
Edition 2 | Chapitre 12 : Manipuler le document / Page 203
Edition 3 | Chapitre 12 : Manipuler le document / Page 203
Exécution du script
Emulation de la console
Code source
<html><head><title>Gestion et manipulation de la sélection dans le document</title></head><body><script type="text/javascript">/* Fonction pour empêcher la déselection sur le mousedown */ function preventDeselect(evt) { evt.preventDefault();}function voirSelection(evt) { var sel=window.getSelection(); for (var i=0; i<sel.rangeCount; i++) { console.log("window.getSelection().toString()="+window.getSelection().toString()); var range=sel.getRangeAt(i) console.log("commonAncestorContainer="+range.commonAncestorContainer); console.log("startContainer.id="+range.startContainer.parentElement.id); console.log("startOffset="+range.startOffset); console.log("endContainer.id="+range.endContainer.parentElement.id); console.log("endOffset="+range.endOffset); }}function selectZone2(evt) { var range=document.createRange(); range.selectNodeContents(document.getElementById("inline2")); window.getSelection().removeAllRanges(); /* Effacer la sélection en cours */ window.getSelection().addRange(range); /* Ajouter range daàns la sélection */}function deleteSelection(evt) { window.getSelection().getRangeAt(0).deleteContents(); }function addStrong(evt) { var strong=document.createElement("strong"); window.getSelection().getRangeAt(0).surroundContents(strong);}function addSmiley(evt) { var smiley=document.createElement("i"); smiley.className="fas fa-smile"; console.log(smiley.outerHTML); // <i class="fas fa-smile"></i> window.getSelection().getRangeAt(0).insertNode(smiley);}document.addEventListener("readystatechange", function(evt) { if (document.readyState=="interactive") { var btnVoirSelection=document.getElementById("voirselection"); btnVoirSelection.addEventListener("click", voirSelection); btnVoirSelection.addEventListener("mousedown", preventDeselect); var btnAddSmiley=document.getElementById("addsmiley"); btnAddSmiley.addEventListener("click", addSmiley); btnAddSmiley.addEventListener("mousedown", preventDeselect); var btnAddStrong=document.getElementById("addstrong"); btnAddStrong.addEventListener("click", addStrong); btnAddStrong.addEventListener("mousedown", preventDeselect); var btnEffacer=document.getElementById("effacer"); btnEffacer.addEventListener("mousedown", preventDeselect); btnEffacer.addEventListener("click", deleteSelection); var btnSelect=document.getElementById("selectZone2"); btnSelect.addEventListener("mousedown", preventDeselect); btnSelect.addEventListener("click", selectZone2); }});</script> <h1>Gestion et manipulation de la sélection</h1><div id="container"> <div class="inline" id="inline1">Div de texte 1</div> <div class="inline" id="inline2">Div de texte 2</div> <div class="inline" id="inline3">Div de texte 3</div> <div class="inline" id="inline4">Div de texte 4</div></div><div class="bouton" id="voirselection">Infos de sélection</div><div class="bouton" id="addsmiley">Ajouter un smiley</div><div class="bouton" id="addstrong">Passer en gras</div><div class="bouton" id="effacer">Effacer la sélection</div><div class="bouton" id="selectZone2">Sélectionner bloc 2</div><style type="text/css"> /* CSS de mises en forme */ div { box-sizing: border-box; } div#container { padding:15px; margin:15px; border:1px solid #ccc; } div.inline { display:inline-block; padding:5px; margin:5px; border:2px solid #333; border-radius:3px; text-align: center; } div.bouton { cursor:pointer; border:1px solid #333; border-radius:4px; display:inline-block; padding:5px; margin:10px; font-weight:bold; background-color:#ccc; color:#000; } div.bouton:hover { background-color:#000; color:#fff; }</style><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"></body></html>