Retourner à la page d'accueil de TJS

Script selection : Gestion et manipulation de la sélection

Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 186

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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 25/04/2019 22:33:14 sur php7 en 63.32 ms