Comment puis-je insérer du texte à la position du curseur dans une zone de texte à l'aide de JavaScript ou de jQuery ?

Insérer du texte au niveau du curseur à l'aide de JavaScript/jQuery

Il est courant de rencontrer des scénarios dans lesquels vous devez insérer dynamiquement du texte dans une zone de texte où le le curseur est actuellement localisé. Que vous développiez des formulaires Web ou construisiez des interfaces interactives, cette fonctionnalité s'avère inestimable.

Heureusement, en tirant parti de JavaScript ou de jQuery, vous pouvez facilement injecter du texte à la position du curseur, même dans des éléments autres que des zones de texte. Voici comment procéder :

Solution JavaScript

La fonction JavaScript suivante, adaptée d'une source fiable, vous permet d'insérer du texte au niveau du curseur dans n'importe quelle zone de texte :

function insertAtCaret(areaId, text) {
  // Retrieve the text area element
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  // Save the current scroll position
  var scrollPos = txtarea.scrollTop;

  // Determine the cursor position based on browser support
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }

  // Split the text area value into front and back parts
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);

  // Insert the text into the cursor position
  txtarea.value = front + text + back;
  strPos = strPos + text.length;

  // Update the cursor position based on browser support
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

  // Restore the scroll position
  txtarea.scrollTop = scrollPos;
}

Utilisation

Pour utiliser cette fonction, suivez ces étapes :

1. HTML : Créez un élément de zone de texte avec un identifiant.

   <textarea>

2. JavaScript : Appelez la fonction insertAtCaret lorsqu'un événement souhaité se produit, comme cliquer sur un lien.

   document.getElementById("myLink").addEventListener("click", function() {
     insertAtCaret("textareaid", "text to insert");
   });

Limitations

Bien que cette solution soit robuste, il est important de noter qu'elle peut ne pas fonctionner parfaitement dans toutes les situations, en particulier lorsqu'il s'agit d'éléments non-textbox. À vous de déterminer si cette approche correspond à vos exigences spécifiques.

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!