Script selection : Gestion et manipulation de la sélection

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

<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>

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>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...