Comment capturer une sélection de texte dans un élément HTMl <textarea>

sélecteur CSS -> ::selection

a marqué ce sujet comme résolu.

Bonjours,

J’essaie de récupérer du texte sélectionné dans une zone <textarea> d’un formulaire HTML. Voici du code qui permet de simuler une sélection de texte dans une zone <textarea>

<!DOCTYPE html>
<html>
<head>
<style>
.edit::-moz-selection { /* Code pour Firefox */
  color: red;
  background: yellow;
}

.edit.::selection {
  color: red;
  background: yellow;
}
</style>
<script>
function demo(x)
{document.getElementById("demo").innerHTML = "Texte sélectionné : " + x;}
</script>
</head>
<body>

<h1>Selectionner une portion de texte dans la zone d'édition</h1>

<p>Zone d'édition</p>
<textarea id="area" class="edit" onselect="demo(event.data)">Voici du texte à sélectionner partiellement.</textarea>
<p id="demo" class="exemple"></p>
</body>
</html>

Est-ce que quelqu’un pourrait m’indiquer comment récupérer le texte sélectionné pour transmettre celui-ci par exemple à la fonction appelée via onselect="demo(event.data)".

Merci. Klodep

Merci pour cette réponse.

Est-ce que cela fonctionne dans ton environnement WEB? Dans mon cas ceci ne fonctionne pas.

document.getSelection(); retourne une valeur à blanc et non le texte sélectionné.

Je fonctionne en mode local (localhost) et avec Firefox comme fureteur. Mon poste est en Arch(linux).

Note que j’ai corrigé aussi la ligne 10 ci-haut .edit.::selection { par .edit::selection { en elevant le point après .edit

Par contre, à la désélection, le texte reste. Je ne sais pas comment le faire disparaître.

Helmasaur

Il est important de ne pas confondre perte de focus (où la sélection va être masqué) et la désélection. window.getSelection().toString() peut renvoyer une sélection dont le textarea à perdu le focus (donc invisible à l’écran mais toujours sélectionné si l’élément regagne le focus). Un exemple ici : https://jsfiddle.net/omcu72qe/

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte