web-dev-qa-db-fra.com

Comment obtenir le texte sélectionné à partir du contrôle de zone de texte avec javascript

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

Comment puis-je le faire?

Lorsque je clique sur le bouton soumettre pour 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 du texte sur la page et clique sur le bouton Soumettre, cela fonctionne, mais si j'écris un texte dans la zone de texte et que je le crée, ce n'est pas le cas. Parce que lorsque je clique sur un autre espace, la sélection de la zone de texte est annulée.

Maintenant, 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 toujours être sélectionné.

Comment cela se fait-il?

javascripthtmltextareatextselectionselectedtext
37
mavera

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 que cela fonctionnera pour vous, c'est pourquoi je donne-le.
L'astuce que vous recherchez est probablement l'appel .focus (), pour redonner à la zone de texte la mise au point afin que la sélection soit réactivée.

[MISE À JOUR] 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 la recherche.

[MISE À JOUR] Je n'ai eu aucun succès avec un bouton dessiné avec une balise li, car lorsque nous cliquons dessus, IE désélectionne la sélection précédente. Le code ci-dessus fonctionne avec un simple input, cependant ...

39
PhiLho

Voici une solution beaucoup plus simple, basée sur le fait que la sélection de texte se produit sur la souris, nous ajoutons donc un écouteur d'événements pour cela:

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

Cela fonctionne dans tous les navigateurs.

Si vous souhaitez également gérer la sélection via le clavier, ajoutez un autre écouteur d'événements pour keyup, avec le même code.

Si ce n'était pas le cas bogue Firefox déposé en 2001 (oui, il y a 14 ans), nous pourrions remplacer la valeur attribuée à window.mySelection Par window.getSelection().toString(), qui fonctionne dans IE9 + et tous les navigateurs modernes, et obtient également la sélection effectuée dans les parties non textarea du DOM.

16
Dan Dascalescu
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" />
4
prat3ik-patel

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

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

Ensuite, vous passez simplement une référence à un élément de champ de texte (comme une zone de texte ou un élément d'entrée) à la fonction:

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

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

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 "";
};

Ensuite, vous feriez juste:

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

par exemple.

2
Shadow2531

Grand fan de jQuery-textrange

Vous trouverez ci-dessous un très 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>
1
fishjd