Ajouter du texte à la position du curseur dans une zone de texte

Commenter

Contenu du snippet

Pour pouvoir insérer du texte (par exemple provenant d'une fonction copier/coller qui a été programmée manuellement.
Sans créer de "range texte" on ne peut pas savoir où est le curseur, et si on veut insérer du texte dans une zone de texte, il faut le faire au début ou à la fin de la zone.
la fonction getPosCurseur(objetTextArea) donne la position du curseur dans la zone de texte.
la fonction insereChaine(texte) permet d'insérer la chaine désirée à la position du curseur trouvée par la fonction getPosCurseur()

Source / Exemple : 


<HTML>
<BODY>
  <form NAME="mForm">
    <input TYPE="button" VALUE="Test d'écriture" ONCLICK="insereChaine(this.value)">
    <input TYPE="button" VALUE="Autre texte inséré" ONCLICK="insereChaine(this.value)">
    <input TYPE="button" VALUE="Essais encore" ONCLICK="insereChaine(this.value)">
    <br>
    <textarea NAME="mTextArea" ROWS="5" COLS="100" ONCHANGE="setPosCurseur()" ONCLICK="setPosCurseur()"></textarea>
  </form>
</body>
</html>
<script>
var g_posCurseur; // variable global positition du curseur

//définit la postition du curseur
function setPosCurseur() {
  g_posCurseur = getPosCurseur(mForm.mTextArea);
}

//retourne l'emplacement du curseur
function getPosCurseur(oTextArea) {
  //sauve le contenu avant modification de la zone de texte
  var sAncienTexte = oTextArea.value;

  //crer un objet "Range Objet" et sauve son texte avant modification
  var oRange = document.selection.createRange();
  var sAncRangeTexte = oRange.text;
  //cette chaine ne doit pas se retrouver dans la zone de texte !
  var sMarquer = String.fromCharCode(28)+String.fromCharCode(29)+String.fromCharCode(30);

  //insère la chaine où le curseur est
  oRange.text = sAncRangeTexte + sMarquer; oRange.moveStart('character', (0 - sAncRangeTexte.length - sMarquer.length));

  //sauver la nouvelle chaine
  var sNouvTexte = oTextArea.value;

  //remet la valeur du texte à son ancienne valeur
  oRange.text = sAncRangeTexte;

  //recherche dans la nouvelle chaine et trouve l'emplacement
  // de la chaîne de marquage et renvoie la position
  for (i=0; i <= sNouvTexte.length; i++) {
    var sTemp = sNouvTexte.substring(i, i + sMarquer.length);
    if (sTemp == sMarquer) {
      var cursorPos = (i - sAncRangeTexte.length);
      return cursorPos;
    }
  }
}

//insère la chaine dans la zone de texte où le curseur est
function insereChaine(sChaine) {  
  //si curseur n'a pas de position : insère la chaine à la fin
  if (typeof(g_posCurseur)=='undefined') {
    mForm.mTextArea.value+=sChaine;
  }else {
    var firstPart = mForm.mTextArea.value.substring(0, g_posCurseur);  
    var secondPart = mForm.mTextArea.value.substring(g_posCurseur,mForm.mTextArea.value.length);
    mForm.mTextArea.value = firstPart + sChaine + secondPart;
  }
}
</SCRIPT>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.