CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 00:36:40

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs & Astuces

> AJOUTER DU TEXTE À LA POSITION DU CURSEUR DANS UNE ZONE DE TEXTE

AJOUTER DU TEXTE À LA POSITION DU CURSEUR DANS UNE ZONE DE TEXTE

Information sur la source

Note :

7,60 / 10

Catégorie :Trucs & Astuces Niveau :Expert Date de création :19/11/2003 Vu :14 245

Auteur : rkampf

Ecrire un message privé

Commentaire sur cette source (10)

Ajouter un commentaire et/ou une note

Description

Pour pouvoir insérer du texte (par exemple provenant d'une fonction copier/coller qui a été programmée manuellement.
Sans créer de "range texte" on ne peut pas savoir où est le curseur, et si on veut insérer du texte dans une zone de texte, il faut le faire au début ou à la fin de la zone.
la fonction getPosCurseur(objetTextArea) donne la position du curseur dans la zone de texte.
la fonction insereChaine(texte) permet d'insérer la chaine désirée à la position du curseur trouvée par la fonction getPosCurseur()

Source

<HTML>
<BODY>
<form NAME="mForm">
<input TYPE="button" VALUE="Test d'écriture" ONCLICK="insereChaine(this.value)">
<input TYPE="button" VALUE="Autre texte inséré" ONCLICK="insereChaine(this.value)">
<input TYPE="button" VALUE="Essais encore" ONCLICK="insereChaine(this.value)">
<br>
<textarea NAME="mTextArea" ROWS="5" COLS="100" ONCHANGE="setPosCurseur()" ONCLICK="setPosCurseur()"></textarea>
</form>
</body>
</html>
<script>
var g_posCurseur; // variable global positition du curseur
//définit la postition du curseur
function setPosCurseur() {
g_posCurseur = getPosCurseur(mForm.mTextArea);
}
//retourne l'emplacement du curseur
function getPosCurseur(oTextArea) {
//sauve le contenu avant modification de la zone de texte
var sAncienTexte = oTextArea.value;
//crer un objet "Range Objet" et sauve son texte avant modification
var oRange = document.selection.createRange();
var sAncRangeTexte = oRange.text;
//cette chaine ne doit pas se retrouver dans la zone de texte !
var sMarquer = String.fromCharCode(28)+String.fromCharCode(29)+String.fromCharCode(30);
//insère la chaine où le curseur est
oRange.text = sAncRangeTexte + sMarquer; oRange.moveStart('character', (0 - sAncRangeTexte.length - sMarquer.length));
//sauver la nouvelle chaine
var sNouvTexte = oTextArea.value;
//remet la valeur du texte à son ancienne valeur
oRange.text = sAncRangeTexte;
//recherche dans la nouvelle chaine et trouve l'emplacement
// de la chaîne de marquage et renvoie la position
for (i=0; i <= sNouvTexte.length; i++) {
var sTemp = sNouvTexte.substring(i, i + sMarquer.length);
if (sTemp == sMarquer) {
var cursorPos = (i - sAncRangeTexte.length);
return cursorPos;
}
}
}
//insère la chaine dans la zone de texte où le curseur est
function insereChaine(sChaine) {
//si curseur n'a pas de position : insère la chaine à la fin
if (typeof(g_posCurseur)=='undefined') {
mForm.mTextArea.value+=sChaine;
}else {
var firstPart = mForm.mTextArea.value.substring(0, g_posCurseur);
var secondPart = mForm.mTextArea.value.substring(g_posCurseur,mForm.mTextArea.value.length);
mForm.mTextArea.value = firstPart + sChaine + secondPart;
}
}
</SCRIPT>

<HTML>
<BODY>
  <form NAME="mForm">
    <input TYPE="button" VALUE="Test d'écriture" ONCLICK="insereChaine(this.value)">
    <input TYPE="button" VALUE="Autre texte inséré" ONCLICK="insereChaine(this.value)">
    <input TYPE="button" VALUE="Essais encore" ONCLICK="insereChaine(this.value)">
    <br>
    <textarea NAME="mTextArea" ROWS="5" COLS="100" ONCHANGE="setPosCurseur()" ONCLICK="setPosCurseur()"></textarea>
  </form>
</body>
</html>
<script>
var g_posCurseur; // variable global positition du curseur

//définit la postition du curseur
function setPosCurseur() {
  g_posCurseur = getPosCurseur(mForm.mTextArea);
}

//retourne l'emplacement du curseur
function getPosCurseur(oTextArea) {
  //sauve le contenu avant modification de la zone de texte
  var sAncienTexte = oTextArea.value;

  //crer un objet "Range Objet" et sauve son texte avant modification
  var oRange = document.selection.createRange();
  var sAncRangeTexte = oRange.text;
  //cette chaine ne doit pas se retrouver dans la zone de texte !
  var sMarquer = String.fromCharCode(28)+String.fromCharCode(29)+String.fromCharCode(30);

  //insère la chaine où le curseur est
  oRange.text = sAncRangeTexte + sMarquer; oRange.moveStart('character', (0 - sAncRangeTexte.length - sMarquer.length));

  //sauver la nouvelle chaine
  var sNouvTexte = oTextArea.value;

  //remet la valeur du texte à son ancienne valeur
  oRange.text = sAncRangeTexte;

  //recherche dans la nouvelle chaine et trouve l'emplacement
  // de la chaîne de marquage et renvoie la position
  for (i=0; i <= sNouvTexte.length; i++) {
    var sTemp = sNouvTexte.substring(i, i + sMarquer.length);
    if (sTemp == sMarquer) {
      var cursorPos = (i - sAncRangeTexte.length);
      return cursorPos;
    }
  }
}

//insère la chaine dans la zone de texte où le curseur est
function insereChaine(sChaine) {  
  //si curseur n'a pas de position : insère la chaine à la fin
  if (typeof(g_posCurseur)=='undefined') {
    mForm.mTextArea.value+=sChaine;
  }else {
    var firstPart = mForm.mTextArea.value.substring(0, g_posCurseur);  
    var secondPart = mForm.mTextArea.value.substring(g_posCurseur,mForm.mTextArea.value.length);
    mForm.mTextArea.value = firstPart + sChaine + secondPart;
  }
}
</SCRIPT>

Sources de la même categorie

VERIFIER UNE ADRESSE E-MAIL par elmersaid

DÉTECTER LES VISITEURS EN PROVENANCE DE GOOGLE par elmersaid

EMPÊCHER QUE VOTRE PAGE NE S'AFFICHE PAS DANS UN CADRE (IFRA... par elmersaid

ROLLOVER SUR LES BARRES DE SCROLL par elmersaid

OUTIL DE SÉLECTION par jdmcreator

Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de windob le 24/11/2003 18:57:45

juste comme ça , c'est quoi un range object ???

Commentaire de smilynet le 25/11/2003 05:56:28

c'est pas un range object c'est un range tout court (une selection si tu prefere)
ce genre de script ne marche en général pas sur mac (a confirmer pour celui-ci...)

Commentaire de windob le 25/11/2003 21:17:44

merci, au fait, j'ai pas mac je peux pa te dire si ton script marche salut ...

Commentaire de brice0306 le 10/02/2004 16:31:11

super source!! nickel :)
jusqu'a maintenant j'inserais mes textes à la fin du champs, c'était nul, j'ai eu l'idée: si j'essayais de l'insérer là où ya le curseur? ça a l'air dur, un petit tour sur www.javascriptfr.com, recherche "INSéRER TEXTAREA"... et hop, magie magie je trouve LA source parfaite!!

merci!

Commentaire de ChAnG-Fu le 18/03/2004 19:43:42

Nikel rien a dire

merci pour cette source :)

Commentaire de rekam le 14/10/2004 17:15:24

Très bien, superbe source. Dommage que ça ne fonctionne pas sous Firefox, kameleon et autre Netscape...

Commentaire de monjal26 le 04/05/2005 09:22:49

super script marche super bien.merci
à rajouter onKeyUp=setPosCurseur() dans le text area pour un meilleur résultat

Commentaire de Davidou2001 le 19/07/2005 16:07:02

Existe-t-il un moyen de faire marcher ce code pour Firefox ?? Merci.

Commentaire de megaspoilt le 15/12/2005 20:36:40

null! kan va-t-on arreter de faire des codes exclusif IE?! IE c deja pas terrib alors faut pas pousser ! je suis a la recherche d un code (ou d une maniere de faire) compatible avec TOUS les navigateurs ! Firefox, Opera, Safari, Konqueror, IE, etc...

et SANS faire 1000 if pour faire un code different pour chaque navigateur...

si par hazard qqn est au courant...

Commentaire de VladimirSLB le 16/02/2006 11:33:57

Je me suis inspiré de cet article pour écrire une fonction qui fait le getPosCurseur un peu plus proprement sous IE : plus courte et sans la chaine temporaire (sMarquer) qui ne doit pas déjà se trouver dans le texte ce qui nuit à la généralité..

Pour ce qui est de FireFox, la fonction est déjà intégré à votre objet input , vous pouvez l'atteindre de la facon suivante : [votre_input].selectionStart

Ajouter un commentaire

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

RE : PROTOTYPE: PROBLèME AVEC "EVENT" par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

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