begin process at 2010 03 21 16:42:14
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > CURSEUR DANS TEXTAREA

CURSEUR DANS TEXTAREA


 Information sur la source

Note :
9,7 / 10 - par 10 personnes
9,70 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :textarea, position, curseur, ajout, texte Niveau :Débutant Date de création :18/09/2006 Date de mise à jour :23/11/2006 18:49:08 Vu / téléchargé :19 717 / 1 246

Auteur : PetoleTeam

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
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

  • //-------------------------------------------------------------
  • // 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 ------------------------------------------------------
//-------------------------------------------------------------
//  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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

23 novembre 2006 18:49:08 :
Correction d'un vilain BUG avec le retour chariot sous IE. En BONUS Modification de la function Insert_Tag() qui devient une fonction à part entière.

 Sources du même auteur

Source avec Zip CLEAR D'UN INPUT FILE
Source avec Zip FONCTION ALERT ET LES ACCENTS
Source avec Zip LECTURE ET RÉCUPÉRATION DES LIGNES D'UN FICHIER TEXTE
Source avec Zip Source avec une capture RECHERCHE ET COLORISATION, MISE EN SURBRILLANCE
Source avec Zip DIV QUI SUIT LE SCROLLING DE LA PAGE

 Sources de la même categorie

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CALCULER VOTRE IMC par lesnouesremy

 Sources en rapport avec celle ci

Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture RAINBOW CURSOR par wackybacky
Source avec Zip POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER par Kimjoa
Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

Commentaires et avis

Commentaire de Coolpix08 le 19/09/2006 10:24:33

Aaaaaaaaaaaaaaaahhhhhhhhhhhhh!!!!!!!!!!

Comment t'assure!!!!!
C'est EX-ACT-E-MENT ce qui me fallait et que je galere trop!!!Enfin Galérait de trop!!!

Tu viens de me sortir d'une belle ...impasse. Encore merci jte valide sur le post que j'avais fait en tout cas ta source englobe pile poil ce que je voulait. Je vais pouvoir passer au problème suivant :)!

Encore merci!

Commentaire de bultez le 19/09/2006 11:29:26

salut PetoleTeam,
ils sont nombreux ceux qui cherchent
    certaines de ces fonctions.
dorénavant on sait où les orienter.
nickel, 10/10.
@+

Commentaire de xl714 le 25/09/2006 09:36:10

Exellent, ça ouvre des portes sur des trucs sympa du genre intellisens dans textarea, à voir.
Merci. 10/10

Commentaire de vduffaut le 25/09/2006 09:46:07

Extra ! Je cherchais à réaliser cela depuis longtemps sans avoir le temps de m'y consacrer... Quel temps gagné ! Merci de partager ce code avec nous.

Commentaire de Buck777 le 25/09/2006 20:33:44

WOW !!!!

Voilà LE code que tout le monde attendait ;-))
C'est propre, c'est beau, et puis j'ajoute que ça fonctionne sous Mac avec Firefox 1.5.2, Opéra 9.01 et Safari ;-))))

Merci, c'est du 10/10

Commentaire de tatactic le 11/02/2007 13:18:16

//-------------------------------------------------------------
// Remarque de tatactic : Merci à G.Ferraz J'ai vraiment
// galéré là dessus et ça c'est du beau Javascript!
//-------------------------------------------------------------
Parfait 10/10 et merci de partager ça!!!
(-: tatactic :-)
http://tatactic.be

Commentaire de goliath2002 le 20/03/2007 18:18:50

bonjour

Très  très bien, c'est ce que je cherchais, je voulais savoir s'il est possible aussi d'insérer de l'image.

Merci

Commentaire de magicpetrus le 18/02/2008 15:08:41 8/10

Parfait, merci beaucoup pour ce code très utile.

Petite correction néanmoins de la fonction Cursor_GetPos( where_, pos_)
On ne passe pas la position en paramètre vu que c'est ce que l'on recherche! ;)

Heureusement JS ne fait pas de chichis quand on oublie des paramètres!

Commentaire de PetoleTeam le 19/02/2008 17:54:34

Bonjour et bien vu...

Cela doit être un paramètre qui est resté après le copier coller de la fonction Cursor_SetPos( where_, pos_)

>>Heureusement JS ne fait pas de chichis quand on oublie des paramètres!
...pas de raison tant que l'on ne l'utilise pas sans test, je dirai même qu'il est intéressant de ne pas avoir, dans certains cas, à le passer quand on le veux par défaut.

Juré à la prochaine modif je corrige.

Commentaire de lamyseba le 09/04/2008 13:16:20

Bonjour, et d'abord bravo pour ce code. plusieurs remarques:
- Sous Firefox2 et Konqueror, si on insère du texte tout en bas et qu'il y a une scrollbar, la scrollbar remonte tout en haut et nous oblige à rescroller vers le bas pour continuer à taper notre texte. Non testé sous IE

- Sous Firefox 2, si on place le curseur dans un endroit du texte invisible sans scroller (par exemple le bas du texte, lorsque la scrollbar est en haut), la scrollbar ne scroll pas pour rendre le curseur visible. Sous Konqueror ce bug n'est pas observé, je n'ai pas testé sous IE.

Commentaire de lamyseba le 09/04/2008 14:31:36

Je pense que le bout de code trouvé sur un forum pourrait répondre à ma première remarque
http://www.developpez.net/forums/showthread.php?t=352200#post2151969

Commentaire de PetoleTeam le 23/04/2008 19:05:25

Bonjour,
pas vu le problème sous windows, la mise du focus sur la sélection la remet à l'écran.
Je note toutefois la remarque.
;O)

Commentaire de fkuchta le 23/02/2009 14:11:46 10/10

J'applaudis de toutes mes mains !

Merci beaucoup, les codes de cette qualité sous JS sont trop rares.

Commentaire de Niidhogg le 12/12/2009 14:46:57 10/10

Merci, beaucoup, la source est "!nikel!", rien à redire !

Commentaire de tatactic le 12/12/2009 18:54:50

2009 et toujours une référence ce code :-)
Quand je pense au temps que ça m'avais pris de piger ça en février 2007!

Commentaire de Niidhogg le 12/12/2009 21:41:27

Je penses que c'est le genre de source qu'il faut faire connaitre partout sur la toile, parceque là, c'est vraiment jolie :p

Commentaire de fenoril le 08/03/2010 17:49:16

Voilà !!!

Entre les codes qui ne fonctionnent que pour certains navigateurs, ceux qu'on ne peut pas lire sans être un pro, ceux qui ont des bugs... C'est un code qui dénote...

MErci beaucoups !

P.S. : PAr contre, c'est ennuyeux que je ne sois pas tombé dessus en premier en faisant mes recherches sur le site, résultat : Deux semaine à chercher....

Commentaire de tatactic le 09/03/2010 14:09:32

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

Commentaire de fenoril le 10/03/2010 22:15:30

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)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Position curseur dans textarea [ par fixeurman ] Bonjour, un petit javascript me permet de saisir un texte par défaut dans une zone de texte (le login + la date) (script ci dessous) ; mon p URGENT: position du curseur dans un TEXTAREA ??? [ par Kiom ] Bonjour tout le monde,bon voilà une petite question :est-il possible en javascript de connaître la position du curseur dans un textarea ?....une répon comment écrire dans un textarea ?? [ par moudj ] Bonjour,je ne sais pas si c'est possible mais voilà ce que je veux faire.pendant qu'on saisi un texte dans un textarea, on veut, à un moement donné, à recuperer la Position du curseur dans un champ texte [ par synoc ] j ai besoin d une astuce en javascript ou en php : peut on recupererla position du curseur dans un champ de texte (<inputtype=text>) ???ou sinon Récupérer la position du curseur dans un TEXTAREA [ par piment ] Comment récupérer la position du curseur dans un textarea ou la position en nombre de caractère depuis le début.Merci connaitre la position du curseur dans un champ et l'exploiter [ par zarzar ] bonjour je voudrais trouver un moyen de faire la chose suivante : j'ai un texte dans un champ X avec le curseur de texte clignotant au beau milieu d Position du curseur dans une div [ par Dj Nam ] Bonjour tout le monde,Dans le cadre de développement d'un site web, j'aimerais tranformer une div en textarea, pour cela j'utilise le javascript car j agrandir textarea en fonction du texte tapé [ par lilbrother ] Bonjour, Est ce que c'est possible d'agrandir un textarea en fonction du texte que l'utilisateur a tapé ? Si le texte tapé est plus grand que le text curseur et textarea [ par Slyders ] Bonjour, j'ai un ptit problème :)Je veu insérer des tabulation dans mon textarea, alors j'ai créer un bouton ! <Input type="b Scroll barre qui remonte lorsqu'on ajoute du texte dans un textarea [ par demicervo ] Bonjour à tous,j'espère que vous allez pouvoir m'aider.J'ai bien cherché mais je n'ai pas trouvé de solution satisfaisante.J'ai donc un textarea avec


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,546 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales