Curseur dans textarea
5/5 (22 avis)
Vue 30 213 fois - Téléchargée 1 568 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
Faites en bon usage comme toujours et n'hésitez pas à faire remonter les commentaires.
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
- Setselectionrange js
- Input selectionstart - Meilleures réponses
- Javascript setselectionrange - Meilleures réponses
- Position curseur dans textarea ✓ - Forum - Javascript / DHTML
- Javascript : Ajouter du texte a la position du curseur dans un textarea - CodeS SourceS - Guide
- Curseur sql - Conseils pratiques - SQL
- Curseur vba - Forum - Visual Basic
- Ora-01000: nombre maximum de curseurs ouverts dépassé - Forum - C# / .NET
14 janv. 2012 à 17:15
9 janv. 2012 à 10:46
3 mai 2011 à 23:13
10 mars 2010 à 22:15
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)
9 mars 2010 à 14:09
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.