Accueil > > > CURSEUR DANS TEXTAREA
CURSEUR DANS TEXTAREA
Information sur la source
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
- //-------------------------------------------------------------
- // 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.
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
Sources de la même categorie
Commentaires et avis
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
|
Derniers Blogs
[WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|