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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 806 fois - Téléchargée 28 fois

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

Ajouter un commentaire

Commentaires

Signaler
VladimirSLB
Messages postés
1
Date d'inscription
mardi 10 janvier 2006
Statut
Membre
Dernière intervention
16 février 2006
Je me suis inspiré de cet article pour écrire une fonction qui fait le getPosCurseur un peu plus proprement sous IE : plus courte et sans la chaine temporaire (sMarquer) qui ne doit pas déjà se trouver dans le texte ce qui nuit à la généralité..

Pour ce qui est de FireFox, la fonction est déjà intégré à votre objet input , vous pouvez l'atteindre de la facon suivante : [votre_input].selectionStart
Signaler
megaspoilt
Messages postés
1
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
15 décembre 2005
null! kan va-t-on arreter de faire des codes exclusif IE?! IE c deja pas terrib alors faut pas pousser ! je suis a la recherche d un code (ou d une maniere de faire) compatible avec TOUS les navigateurs ! Firefox, Opera, Safari, Konqueror, IE, etc...

et SANS faire 1000 if pour faire un code different pour chaque navigateur...

si par hazard qqn est au courant...
Signaler
Davidou2001
Messages postés
4
Date d'inscription
jeudi 18 juillet 2002
Statut
Membre
Dernière intervention
19 juillet 2005
Existe-t-il un moyen de faire marcher ce code pour Firefox ?? Merci.
Signaler
monjal26
Messages postés
45
Date d'inscription
lundi 5 avril 2004
Statut
Membre
Dernière intervention
21 septembre 2006
super script marche super bien.merci
à rajouter onKeyUp=setPosCurseur() dans le text area pour un meilleur résultat
Signaler
rekam
Messages postés
122
Date d'inscription
mardi 19 novembre 2002
Statut
Membre
Dernière intervention
10 mars 2011
Très bien, superbe source. Dommage que ça ne fonctionne pas sous Firefox, kameleon et autre Netscape...
Afficher les 10 commentaires
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.