Comment capturer le texte sélectionné à partir d'une zone de texte en JavaScript : une solution complète

Comment capturer une sélection de texte à partir d'une zone de texte en JavaScript

De nombreux développeurs JavaScript rencontrent des difficultés lorsqu'ils tentent de récupérer le texte sélectionné à partir d'un contrôle de zone de texte . Cet article aborde ce problème avec une analyse complète et une solution pratique.

Capture du texte sélectionné pour les navigateurs modernes :

Pour les navigateurs modernes prenant en charge l'API de sélection HTML5, le L'extrait de code suivant peut être utilisé :

<code class="javascript">function ShowSelection() {
  const textArea = document.getElementById('textbox');
  const selection = textArea.selectionStart !== undefined
    ? textArea.value.substring(textArea.selectionStart, textArea.selectionEnd)
    : '';
  alert(`You selected: ${selection}`);
}</code>

Capturer le texte sélectionné pour Internet Explorer :

Internet Explorer nécessite une approche différente. Le code suivant pour ce navigateur :

<code class="javascript">if (document.selection !== undefined) {
  textArea.focus();
  const sel = document.selection.createRange();
  const selection = sel.text;
  alert(`You selected: ${selection}`);
}</code>

Maintien de la sélection lors d'un clic sur un bouton :

Pour éviter que la sélection ne soit effacée lorsqu'un bouton est cliqué, le focus doit être retourné à la zone de texte. Ceci peut être réalisé en gérant l'événement onkeydown :

<code class="javascript">document.onkeydown = function (e) { ShowSelection(); };</code>

Bouton avec balise d'entrée :

Bien que cette approche fonctionne pour les boutons dessinés à l'aide de la balise li, elle peut ne fonctionne pas correctement pour les boutons dessinés à l’aide de la balise input. Dans ce dernier cas, des solutions alternatives existent, telles que l'utilisation des événements onfocus et onblur pour maintenir la sélection.

En implémentant le code fourni, les développeurs peuvent capturer et afficher efficacement le texte sélectionné à partir d'un contrôle de zone de texte, garantissant ainsi une expérience utilisateur sur différents navigateurs.

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!