Comment récupérer le texte sélectionné à partir d’une zone de texte en JavaScript ?

Récupération du texte sélectionné à partir d'une zone de texte en JavaScript

Lorsque vous travaillez avec des formulaires Web, il est souvent nécessaire de récupérer le texte sélectionné par l'utilisateur à partir d'un zone de texte. Cela peut être fait à l'aide de JavaScript et des étapes suivantes :

Étape 1 : implémenter la compatibilité entre navigateurs

Pour garantir la compatibilité entre différents navigateurs, utilisez le code suivant pour déterminer la méthode préférée pour obtenir le texte sélectionné :

<code class="js">function getSelection(textComponent) {
  if (textComponent.selectionStart !== undefined) {
    // Standards-compliant version
    return textComponent.value.substring(textComponent.selectionStart, textComponent.selectionEnd);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    return sel.text;
  }
}</code>

Étape 2 : Récupérer le texte sélectionné lors d'un événement

Pour récupérer le texte sélectionné par l'utilisateur lorsqu'il clique sur un bouton ou autre élément de l'interface utilisateur, attachez un écouteur d'événement à l'élément :

<code class="js">document.getElementById("button").addEventListener("click", function() {
  var selectedText = getSelection(document.getElementById("textbox"));
  alert(selectedText);
});</code>

Étape 3 : Gérer les bizarreries d'Internet Explorer

Internet Explorer 6 peut nécessiter des étapes supplémentaires pour récupérer l'élément texte sélectionné correctement. Utilisez le code suivant :

<code class="js">document.onkeydown = function (e) {
  getSelection(document.getElementById("textbox"));
};</code>

Exemple :

L'exemple suivant montre la fonctionnalité en action :

<code class="html"><input id="textbox" type="text" value="Lorem ipsum dolor sit amet">
<button id="button">Get Selected Text</button>

<script>
  document.getElementById("button").addEventListener("click", function() {
    var selectedText = getSelection(document.getElementById("textbox"));
    alert(selectedText);
  });
</script></code>

En suivant ces étapes , vous pouvez récupérer efficacement le texte sélectionné à partir d'une zone de texte en JavaScript, garantissant ainsi la compatibilité entre navigateurs et résolvant les bizarreries d'Internet Explorer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!