Maison > interface Web > js tutoriel > le corps du texte

Comment insérer du texte à la position du curseur dans une zone de texte à l'aide de JavaScript ?

Patricia Arquette
Libérer: 2024-11-20 11:32:02
original
923 Les gens l'ont consulté

How to Insert Text at the Cursor Position in a Text Area using JavaScript?

Insérer du texte à la position du curseur avec Javascript/jQuery

Dans le développement Web, l'ajout de texte à l'endroit où le curseur est positionné peut améliorer l'expérience utilisateur. Un scénario consiste à permettre aux utilisateurs d'insérer de manière transparente un texte prédéfini dans une zone de texte en cliquant sur un lien.

Insertion de texte à la position du curseur

Pour insérer du texte à la position du curseur, nous peut utiliser la fonction JavaScript suivante :

function insertAtCaret(areaId, text) {
  // Get the textarea element
  var txtarea = document.getElementById(areaId);

  // Check if the element exists
  if (!txtarea) {
    return;
  }

  // Determine the browser type (Internet Explorer or others)
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));

  // Calculate the cursor position
  var strPos = 0;
  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;
  }

  // Create a string that consists of the text before, after, and the inserted text
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;

  // Reset the cursor position after inserting the text
  strPos = strPos + text.length;
  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();
  }
}
Copier après la connexion

Exemple Utilisation

Le code HTML et JavaScript suivant montre comment utiliser la fonction insertAtCaret() :

<textarea>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal