Curseur dans textarea

Soyez le premier à donner votre avis sur cette source.

Vue 29 983 fois - Téléchargée 1 559 fois

Description

Comment placer le curseur dans un TEXTAREA ou un INPUT pour ajouter un texte au bon endroit, tel à été le fil conducteur de cette source...
J'espère qu'elle ravira le "FORUMEUX" et les autres qui se sont posé la question sans que l'on y réponde entièrement.

Deux fichiers
- gfcurseur.htm pour voir l'utilisation.
- gfcurseur.js qui contient les trois fonctions de base.

Ci dessous les fonctions du fichier js

Source / Exemple :


//-------------------------------------------------------------
//  Nom Document : GFCURSOR.JS
//  Auteur       : G.Ferraz
//  Objet        : Gestion du curseur dans TEXTAERA et INPUT...
//  Création     : 18.09.2006
//-------------------------------------------------------------
//  Mise à Jour  : 20.11.2006
//  Objet        : Vilain BUG avec le retour chariot sous IE (*)
//-------------------------------------------------------------
//-(*)------------------
function Get_NbrCR(txt_){
  var NbrCR = 0;
  var Pos = txt_.indexOf("\r\n");
  while( Pos > -1){
    Pos = txt_.indexOf("\r\n", Pos+2);
    NbrCR ++;
  }
  return( NbrCR);
}
//----------------------------------
function Cursor_SetPos( where_, pos_){
  //-- Recup l'Objet
  var Obj = document.getElementById( where_);
  if( Obj){
    Obj.focus();
    if( typeof Obj.selectionStart != "undefined"){
      Obj.setSelectionRange( pos_, pos_);
    }
    else{ // IE and consort
      var Chaine = Obj.createTextRange();
      Chaine.moveStart('character', pos_);
      //-- Deplace le curseur
      Chaine.collapse();
      Chaine.select();
    }
    //-- Retour valeur Reelle placee
    return( Cursor_GetPos( where_, pos_));
  }
}
//----------------------------------
function Cursor_GetPos( where_, pos_){
  //-- Recup l'Objet
  var Obj= document.getElementById(where_);
  if( Obj){
    //-- Focus sur Objet
    Obj.focus();
    if(typeof Obj.selectionStart != "undefined")
      return Obj.selectionStart;
    else{ // IE and consort
      var szMark = "~~";
      var Chaine = Obj.value;
      //-- Cree un double et insert la Mark ou est le curseur
      var szTmp = document.selection.createRange();
      szTmp.text = szMark;
      //-- Recup. la position du curseur
      var PosDeb = Obj.value.search(szMark);
      //-(*)- Supprime les retours Chariot
      var szAvant  = Chaine.substring( 0 , PosDeb);
      PosDeb -= Get_NbrCR( szAvant);
      //-- Restaure valeur initiale
      Obj.value = Chaine;
      Chaine = Obj.createTextRange();
      //-- Deplace le Debut de la chaine
      Chaine.moveStart('character', PosDeb);
      //-- Deplace le curseur
      Chaine.collapse();
      Chaine.select();
      return( PosDeb);
    }
  }
}
//------------------------------------
function Cursor_AddTexte(where_, txt_){
  //-- Recup l'Objet
  var Obj = document.getElementById( where_);
  if( Obj){
    //-- Focus sur Objet
    Obj.focus();
    if( typeof Obj.selectionStart != "undefined"){
      //-- Position du curseur
      var PosDeb  = Obj.selectionStart;
      var PosFin  = Obj.selectionEnd;
      //-- Recup. des Chaines
      var Chaine  = Obj.value;
      var szAvant = Chaine.substring( 0 , PosDeb);
      var szApres = Chaine.substring( PosFin, Obj.textLength );
      //-- Recup. texte selectionne
      var szSelect = Chaine.substring( PosDeb, PosFin);
      //-- Insertion du texte
      Obj.value = szAvant + txt_ + szApres;
      //-- Replace le curseur
      Obj.setSelectionRange(  szAvant.length + txt_.length, szAvant.length + txt_.length );
      //-- Replace le Focus
      Obj.focus();
    }
    else{ // IE and consort
      //-- Recup. de la selection
      var szSelect = document.selection.createRange().text;
      //-- Si du Texte est selectionne on le remplace
      if( szSelect.length > 0){
        var Chaine = document.selection.createRange();
        Chaine.text = txt_ ;
        Chaine.collapse();
        Chaine.select();
      }
      else{
        var Chaine = Obj.value;
        var szMark ="~~";
        //-- Cree un double et insert la Mark ou est le curseur
        var szTmp = document.selection.createRange().duplicate();
        szTmp.text = szMark;
        //-- Recup. la position du curseur
        var PosDeb = Obj.value.search(szMark);
        //-- Recup. des Chaines
        var szAvant = Chaine.substring( 0 , PosDeb);
        var szApres = Chaine.substring( PosDeb, Obj.textLength );
        //-- Insertion du texte
        Obj.value = szAvant + txt_ + szSelect + szApres;
        //-- Repositionne le curseur
        PosDeb += txt_.length;
        //-(*)- Supprime les retours Chariot
        PosDeb -= Get_NbrCR( szAvant);
        //-- Recup de la Chaine
        Chaine = Obj.createTextRange();
        //-- Deplace le Debut de la chaine
        Chaine.moveStart('character', PosDeb);
        //-- Deplace le curseur
        Chaine.collapse();
        Chaine.select();
      }
    }
  }
}
//-- EOF ------------------------------------------------------

Conclusion :


Faites en bon usage comme toujours et n'hésitez pas à faire remonter les commentaires.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
14 janvier 2012

Salut, votre script est super mais j'ai remarqué un problème sous FF lorsque sur un input on a comme paramètre onFocus="this.select()". La fonction ne marche pas. Le problème ne vient pas du script. J'ai le même problème avec un autre script utilisant la fonction ".selectionStart". Auriez vous une idée ? Une solution ? Merci pour votre aide.
Messages postés
37
Date d'inscription
lundi 4 juillet 2005
Statut
Membre
Dernière intervention
13 mars 2011

Chaque année tu fais un heureux ! Merci !
Messages postés
1
Date d'inscription
mardi 10 juillet 2007
Statut
Membre
Dernière intervention
3 mai 2011

Génial cette source. Elle fonctionne toujours. Elle est très propre et super bien commentée. Les exemples sont vraiment pertinents. Merci bcp.
Messages postés
24
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
12 juin 2011

C'est pas gentil mais le pire c'est que c'est vrai.... ;(

Mais pour le reste de monde code de chat j'ai trouvé par moi-même finalement, alors que pour la simple récupération de position du curseur, j'ai du y passer une quarantaine d'heure avant de refaire pour la énième fois une recherche et trouver ce code...

D'ailleurs, je ne comprend pas bien pourquoi GF n'a pas inclus la fonction "Insert_tag" qui est présente dans le fichier d'exemple mais pas le code js.... ???

Est-ce parcequ'elle provient d'une autre source ??? (Celle-là j'ai fini par tout reprogrammer du début... et j'aurais aimé tomber sur un code simple et fonctionnel comme celui-ci)
Messages postés
20
Date d'inscription
mardi 15 mars 2011
Statut
Membre
Dernière intervention
14 janvier 2012

C'est chercher qui apprend le plus... T as donc doublement appris. ;-)
Afficher les 22 commentaires

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.