Conserver la couleur de selection dans un textarea, même après perte de focus

**ProgElecT** · 04/07/2021, 12h37

Salut

Je me suis fait un petit moteur de recherche pour un textarea, à l'aide de 2 boutons (suivant et précédent) je me déplace dans ce textareaen sélectionnant les mots trouvés, se qui permet de toujours visualiser le mot, je voudrais que le mot en cour de visualisation reste en vidéo inverse, cela même si je n'ai plus le focus sur le textarea.
D'avance merci à vous de votre aide.

**ProgElecT** · 05/07/2021, 13h19

Après de nombreuses recherches, je n'ai toujours pas de solution.
Dans d'autres langages il est possible de signifier le maintient de la sélection (donc de la couleur vidéo inverse), apparemment pas avec l'objet textarea du HTML
Le code ci-dessous de ma solution (foireuse) avec du JavaScript.

Code :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="fr"> <!-- truc10.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>voir la selection</title>
		<style>
                        #MenuRech {
                                height:26px;
                                width:606px;
                                background-color:CornflowerBlue;
                        }
                        #RecData{
                                margin-left:3px;
                                margin-top:2px;
                        }
                        button{padding-left:2px;padding-right:2px}
                        #cmptRech{color:white}
                        #TxtDataOms {
                                height:180px;
                                width:598px;
                                resize:vertical;
                        }
                </style>
	</head>
	<body>
		<div id="MenuRech" >
			<input type="text" id="RecData" onkeyup="ValidRech()" placeholder="2 caract. mini">
			<button id="BtnRechDansData" onclick="RechDansData()" disabled="true">rechercher</button>
			<button id="BtnRechDansDataPrecedant" onclick="SuivantPrecedant('P')" onmousemove="Etat(this)" disabled="true" >Précédent</button>
			<button id="BtnRechDansDataSuivant" onclick="SuivantPrecedant('S')" onmousemove="Etat(this)" disabled="true" >Suivant</button>
			<span id="cmptRech">0/0</span>
		</div>
		<textarea id="TxtDataOms" name="TxtDataOms" class="BordSimple">
Maître Corbeau, sur un arbre perché,
Tenait en son bec un fromage.
Maître Renard, par l'odeur alléché,
Lui tint à peu près ce langage :
Et bonjour, Monsieur du Corbeau.
Que vous êtes joli ! que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois.
À ces mots, le Corbeau ne se sent pas de joie ;
Et pour montrer sa belle voix,
Il ouvre un large bec, laisse tomber sa proie.
Le Renard s'en saisit, et dit : Mon bon Monsieur,
Apprenez que tout flatteur
Vit aux dépens de celui qui l'écoute.
Cette leçon vaut bien un fromage, sans doute.
Le Corbeau honteux et confus
Jura, mais un peu tard, qu'on ne l'y prendrait plus.
		</textarea>
		<script>
                        let CmptR = 0;
                        let NumR = 0;
                        let PositionS;
                        let LgnRec = 0;
                        function ValidRech(){
                                let RechQuoi = document.getElementById("RecData");
                                LgnRec = RechQuoi.value.length;
                                if (LgnRec<2) {
                                        document.getElementById("BtnRechDansData").disabled = true;
                                        document.getElementById("BtnRechDansDataPrecedant").disabled = true;
                                        document.getElementById("BtnRechDansDataSuivant").disabled = true;
                                        document.getElementById("cmptRech").textContent = "0 / 0";
                                        
                                }else{
                                        document.getElementById("BtnRechDansData").disabled = false;
                                }
                        }//---------------------------------------------------------
                        function RechDansData(){
                                let RechQuoi = document.getElementById("RecData");
                                LgnRec = RechQuoi.value.length;
                                if (LgnRec<2){return;}
                                
                                let DansDocu = document.getElementById("TxtDataOms");
                                let Compteur = document.getElementById("cmptRech");
                                Compteur.style.display = 'none';
                                CmptR = 0, NumR = 0, PositionS = [];
                                let ResulT;
                                let patterntxt = new RegExp(RechQuoi.value,"igm");
                                while ((ResulT = patterntxt.exec(DansDocu.value)) !== null) {
                                        PositionS.push(ResulT.index);
                                }
                                CmptR = PositionS.length;
                                
                                document.getElementById("BtnRechDansDataPrecedant").disabled = true;
                                document.getElementById("BtnRechDansDataSuivant").disabled = !(CmptR>=2);
                                if (CmptR>=1){
                                        NumR = 1;
                                        DansDocu.selectionStart = PositionS[NumR-1];
                                        DansDocu.selectionEnd = PositionS[NumR-1] + LgnRec;
                                        DansDocu.focus();
                                }
                                Compteur.textContent = NumR + " / " + CmptR;
                                Compteur.style.display = 'inline';
                        }//---------------------------------------------------------
                        function SuivantPrecedant(Action){
                                let DansDocu = document.getElementById("TxtDataOms");
                                Action==="S" ? ++NumR:--NumR;
                                document.getElementById("BtnRechDansDataSuivant").disabled = (NumR===CmptR);
                                document.getElementById("BtnRechDansDataPrecedant").disabled = (NumR===1);
                                document.getElementById("cmptRech").textContent = NumR + " / " + CmptR;
                                DansDocu.selectionStart = PositionS[NumR-1];
                                DansDocu.selectionEnd = PositionS[NumR-1] + LgnRec;
                                DansDocu.focus();
                        }//---------------------------------------------------------
                        function Etat(elem){
                                //console.log (quel);
                                if (elem.disabled === true){
                                        document.getElementById("TxtDataOms").focus();
                                }
                        }
                </script>
	</body>
</html>

La fonction Etat(elem) permet plus ou moins de redonner le focus au textaera même après le passage de l'un des boutons id="BtnRechDansDataPrecedant" et/ou id="SuivantPrecedant" en disabled.

**NoSmoking** · 05/07/2021, 18h10

Bonjour,
on ne peut effectivement pas « styler » le contenu d'une <texarea>, souvent ce qui est fait est d'avoir une <div> qui reprend le formatage de celle-ci.

Exemple :