Maison  >  Article  >  interface Web  >  Comment récupérer le texte sélectionné à partir d’un contrôle TextBox à l’aide de JavaScript ?

Comment récupérer le texte sélectionné à partir d’un contrôle TextBox à l’aide de JavaScript ?

Susan Sarandon
Susan Sarandonoriginal
2024-10-24 22:26:02380parcourir

How to Retrieve Selected Text from a TextBox Control Using JavaScript?

Obtention du texte sélectionné à partir d'un contrôle TextBox à l'aide de JavaScript

Lorsque vous travaillez avec des zones de texte, vous pouvez rencontrer le besoin de récupérer le texte sélectionné. Cet article vise à fournir une solution complète pour cette tâche, en résolvant les problèmes rencontrés avec Internet Explorer 6.

La sélection de texte dans une zone de texte peut être réalisée à l'aide des propriétés intégrées de JavaScript. Pour les navigateurs conformes aux normes, les propriétés selectionStart et selectionEnd fournissent la plage de texte sélectionné. Cependant, pour Internet Explorer, une solution de contournement utilisant l'objet de sélection est nécessaire.

<code class="javascript">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) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}</code>

Au départ, un problème est survenu dans Internet Explorer 6, empêchant le code ci-dessus de fonctionner correctement. Pour résoudre ce problème, un appel focus() est ajouté avant d'accéder à l'objet de sélection. De plus, attacher la fonction ShowSelection() à l'événement onkeydown fournit une solution stable pour détecter le texte sélectionné.

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

Pour plus de précisions, le problème avec les boutons provient de leur comportement inhérent de désélection de texte dans Internet Explorer. . Par conséquent, il est recommandé d’utiliser un simple bouton de saisie. En implémentant cette solution, vous pouvez récupérer efficacement le texte sélectionné à partir d'un contrôle de zone de texte, surmontant ainsi les défis rencontrés avec Internet Explorer 6.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn