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
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|