1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Ajouter du texte à la position du curseur dans une zone de texte

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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 24 079 fois - Téléchargée 30 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
VladimirSLB Messages postés 1 Date d'inscription mardi 10 janvier 2006 Statut Membre Dernière intervention 16 février 2006
16 févr. 2006 à 11:33
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
megaspoilt Messages postés 1 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 15 décembre 2005
15 déc. 2005 à 20:36
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...
Davidou2001 Messages postés 4 Date d'inscription jeudi 18 juillet 2002 Statut Membre Dernière intervention 19 juillet 2005
19 juil. 2005 à 16:07
Existe-t-il un moyen de faire marcher ce code pour Firefox ?? Merci.
monjal26 Messages postés 45 Date d'inscription lundi 5 avril 2004 Statut Membre Dernière intervention 21 septembre 2006
4 mai 2005 à 09:22
super script marche super bien.merci
à rajouter onKeyUp=setPosCurseur() dans le text area pour un meilleur résultat
rekam Messages postés 122 Date d'inscription mardi 19 novembre 2002 Statut Membre Dernière intervention 10 mars 2011
14 oct. 2004 à 17:15
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.