Bonjour à tous,
J'ai besoin d'un élément (textarea, div, pre...) qui réponde aux critères suivants :
  1. Possibilité de suivre la sélection de texte réalisé à la souris (un onclick marche pour la plupart des types d'élément)
  2. Idem mais pour de la sélection de texte au clavier (un onkeyup m'irait bien).
  3. Ne pas pouvoir supprimer/modifier le texte en lui-même
  4. Trouver les limites de la zone sélectionnée : j'ai un javascript qui fait le job lancé par les évènements des points 1 et 2
  5. Le but ultime étant de surligner la zone sélectionée afin qu'elle reste visible en perdant le focus (en général le surlignage bleu disparait dès qu'on sort du champ). Un onblur pourrait lancer la manip


Le problème est que si l'élément contenant le texte n'est pas éditable, les keyevents ne fonctionnent pas. Si il est éditable, on peut supprimer/modifier le texte !
Merci pour vos idées lumineuses

Voici le code
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<pre id="text" style="height: 200px;width: 500px;border: 1px solid black;white-space: normal;overflow-x: scroll" onclick="showPosition()" onkeyup="showPosition()" onblur="highlight()" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus lacus non ligula pellentesque rutrum. Proin vestibulum cursus nisi ac egestas. Morbi fermentum nisl justo, luctus laoreet tortor cursus egestas. Nam volutpat est nunc, vitae rutrum turpis sollicitudin id. Duis id fermentum lectus, a finibus massa. Donec condimentum porttitor vehicula. Pellentesque interdum, lacus eget sodales iaculis, eros neque luctus metus, non varius felis nisi vel leo. Nam leo purus, mattis a convallis eget, mattis ac ex. Etiam feugiat metus eget feugiat consectetur. Nunc id mattis urna. Ut non justo ut tellus pharetra ultricies a at tellus. Nulla tincidunt eros sit amet semper pharetra. Aliquam erat volutpat. Vivamus in semper felis. Nunc vel dolor varius, tincidunt magna sit amet, semper augue. Etiam cursus imperdiet viverra. </pre>
<br>Start: <span id="start"></span>
<br>End: <span id="end"></span>
<br>Length: <span id="length"></span>
 
<script>
        function getSelectionOffsetsWithin(elementId) {
                var start = 0, end = 0;
                var range, priorRange;
                if (typeof window.getSelection != "undefined") {
                        range = window.getSelection().getRangeAt(0);
                        priorRange = range.cloneRange();
                        priorRange.selectNodeContents(document.getElementById(elementId));
                        priorRange.setEnd(range.startContainer, range.startOffset);
                        start = priorRange.toString().length;
                        end = start + range.toString().length;
                        if (range.toString().length > 0) end--;
                }
                return {
                        start: start,
                        end: end
                };
        }
        function showPosition() {
                var positions = getSelectionOffsetsWithin('text');
                positions.start++;
                positions.end++;
                $('#start').text(positions.start);
                $('#end').text(positions.end);
                $('#length').text(positions.end - positions.start + 1);
        }
        function highlight() {
                /* a partir de start et end, encadrer la selection avec un tag <mark> par exemple */
        }
</script>