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
ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice
Avec la dernière génération du lecteur MP3 de Microsoft, le ZUNE HD, Microsoft a publié une nouvelle version du logiciel pour PC. Ainsi, je me suis décidé à installer celle-ci sur mon Tablet PC ACER, comme toujours le logiciel est donc tél...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIESL'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit
La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.
La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En re...
Cliquez pour lire la suite de l'article par odewit COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|