Comment récupérer le texte sélectionné dans une zone de texte avec javascript ?

Question

J'ai une zone de texte et un bouton de lien. Lorsque j'écris du texte, que j'en sélectionne certains et que je clique sur le bouton de lien, le texte sélectionné dans la zone de texte doit être affiché dans une boîte de message.

Comment puis-je le faire ?

---

Lorsque je clique sur le bouton d'envoi de la zone de texte ci-dessous, la boîte de message doit afficher Lorem ipsum. Parce que "Lorem ipsum" est sélectionné dans la zone.

---

Si je sélectionne un texte dans la page et que je clique sur le bouton d'envoi, cela fonctionne, mais si j'écris un texte dans la zone de texte et que je l'envoie, cela ne fonctionne pas. Car lorsque je clique sur un autre espace, la sélection de la zone de texte est annulée.

Le problème est que, lorsque je sélectionne un texte dans la zone de texte et que je clique sur un autre contrôle ou espace, le texte qui est sélectionné doit rester sélectionné.

Comment cela se fait-il ?

Answer 1

OK, voici le code que j'ai :

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  {// Standards Compliant Version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

Problème, bien que le code que je donne pour IE soit donné sur beaucoup de sites, je ne peux pas le faire fonctionner sur ma copie d'IE6 sur mon système actuel. Peut-être qu'il fonctionnera pour vous, c'est pourquoi je le donne.
L'astuce que vous recherchez est probablement l'appel .focus(), pour redonner à la textarea le focus afin que la sélection soit réactivée.

[UPDATE] J'ai obtenu le bon résultat (le contenu de la sélection) avec l'événement onKeyDown :

document.onkeydown = function (e) { ShowSelection(); }

Le code est donc correct. Encore une fois, le problème est d'obtenir la sélection en cliquant sur un bouton... Je continue à chercher.

[UPDATE] Je n'ai pas réussi à obtenir un bouton dessiné avec un bouton de type li car lorsque l'on clique dessus, IE désélectionne la sélection précédente. Le code ci-dessus fonctionne avec une simple input bouton, cependant...

Answer 2

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}

<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

Answer 3

Je pense que vous devriez regarder les propriétés selectionstart/selectionend du champ de saisie pour firefox et textrange dans IE. quelques références : http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/

Answer 4

Pour Opera, Firefox et Safari, vous pouvez utiliser la fonction suivante :

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

Ensuite, il suffit de transmettre à la fonction une référence à un élément de champ de texte (comme un textarea ou un élément de saisie) :

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

Ou, si vous voulez que <textarea> et <input> aient une fonction getSelection() qui leur est propre :

HTMLTextAreaElement.prototype.getSelection = HTMLInputElement.prototype.getSelection = function() {
    var ss = this.selectionStart;
    var se = this.selectionEnd;
    if (typeof ss === "number" && typeof se === "number") {
        return this.value.substring(this.selectionStart, this.selectionEnd);
    }
    return "";
};

Alors, vous feriez juste :

alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());

par exemple.

Answer 5

Grand fan de jQuery-textrange

Vous trouverez ci-dessous un tout petit exemple autonome. Téléchargez jquery-textrange.js et copiez-le dans le même dossier.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>

<script>
/* run on document load **/
$(document).ready(function() {
    /* run on any change of 'textarea' **/
    $('#textareaId').bind('updateInfo keyup mousedown mousemove mouseup', function() {
        /* The magic is on this line **/
        var range = $(this).textrange();
        /* Stuff into selectedId.  I wanted to store this is a input field so it can be submitted in a form. **/
        $('#selectedId').val(range.text);
    });
});
</script>
</head>
<body>

    The smallest example possible using 
    <a href="https://github.com/dwieeb/jquery-textrange">
       jquery-textrange
    </a><br/>
    <textarea id="textareaId" >Some random content.</textarea><br/>
    <input type="text"  id="selectedId"  ></input>

</body>
</html>