Position du curseur dans une div [Résolu]

cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 14 janv. 2009 à 14:59 - Dernière réponse : PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention
- 22 janv. 2009 à 17:24
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 je ne dispose d'aucune connaissance en java.
Le but finale est de pouvoir disposer d'une zone de texte éditable semblable à celle qui permet de poster ce même message, avec une mise en forme directement visible lors de l'édition.

Pour ce faire j'ai commencé à réaliser quelques fonctions (L'ajout de texte, l'insertion du code, les retours à la ligne, backspace et suppr) mais là ou j'aurais besoin de votre aide si préciseuse c'est pour récupérer la position du curseur au clique pour pouvoir insérer du texte au milieu de la zone éditable par exemple.

J'ai essayé d'utiliser les fonctions de createRange() et getCaret (ou quelque chose de semblable) mais cela me retourne toujours "Undefined"

Si je ne suis pas suffisement clair, n'hésitez pas à me demander de détailler d'avantage.

Maxime
Afficher la suite 

28 réponses

Répondre au sujet
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 14 janv. 2009 à 15:07
+3
Utile
bonjour,
>>j'aimerais tranformer une div en textarea,
textarea.value=div.innerHTML

>>Le but finale est de pouvoir disposer d'une zone de texte éditable semblable
>>à celle qui permet de poster ce même message
une saisie wysiwyg ? alors ton div ça va être exclusif IE.
pour être compatible, utiliser un iframe
un ch'tiot exemple ici
mais foultitude d'autres partout

>>pour pouvoir insérer du texte au milieu de la zone éditable
si c'est dans la zone "wysiwyg", regarde mon exemple
si c'est dans le textarea, regarde dans les sources de PetoleTeam,
    il y a un script généralisé nickel.
Cordialement

          [mon Site] [M'écrire] Bul        
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 14 janv. 2009 à 15:15
0
Utile
Merci beaucoup pour ces informations, il s'agit effectivement d'un systeme wiswig pour des personnes ne connaissant pas l'html =)

Je vais donc utiliser les iFrames comme tu me l'as conseillé, et je vais aussi de ce pas regarder ton exemple, je reviendrais par ici si j'ai besoin d'éclaircir des informations et que je ne trouve pas satisfaction sur les moteurs de recherches.

Encore merci

Maxime
Commenter la réponse de cs_Dj Nam
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 14 janv. 2009 à 16:46
0
Utile
Encore merci pour ce code qui est exactement ce que je cherchais, je ne sais pas pourquoi, je m'étais mis en tête que les iFrames en plus d'être génantes pour le référencement, étaient compliqué d'utilisation .. A ce que je vois je me suis un peu trop basé sur les préjugés...

D'ailleurs j'aimerais avoir quelques précisions sur la fonction execCommand()

Si j'ai bien compris, cette commande accepte entre 1 et 3 paramètres, le premier étant le nom de la fonction a executer. Mais où puis-je trouver la liste des commandes préexistantes ?

J'aimerais aussi ajouter un bouton pour insérer un tableau (en html) avec avant, une fenetre qui demande le nombre de lignes et de colones à insérer. Existe-t-il là aussi, pour ma plus grande surprise, une fonction qui permet de faire cela ?

Maxime
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 14 janv. 2009 à 18:40
0
Utile
>>en plus d'être génantes pour le référencement, étaient compliqué d'utilisation
ni l'un ni l'autre
dans un cas comme ici, mais pas seulement.

>>Mais où puis-je trouver la liste des commandes préexistantes ?
presque tout est dans le script
après le mieux c'est une moteur de recherche : regarde ici ;o)

>> pour insérer un tableau (en html)
ça existe dans execCommand !

         [mon Site] [M'écrire] Bul         
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 15 janv. 2009 à 16:49
0
Utile
Merci, mais j'ai effectivement fais quelques rechreches sur ce fameux moteur de recherche et j'arrive à m'en sortir.

Maintenant un autre problème se présente face à moi.
Lors du chargement de la page contenant cette iframe je crée une variable php du nom de $contenu
Celle-ci fonctionne comme il se doit (j'ai vérifié)
mais lorsque je veux au chargement de la page affichier le contenu de cette variable dans la iframe, elle reste vide.. Ou presque, car lorsque j'effectue un clique droit sur la page et que je choisis "Afficher le code source" il s'avère que mon texte est bien présent dans ma iframe.
Comment se fait-il qu'il ne soit alors pas visible ?

Sachant que l'affichage se fait lors de l'appelle de la fonction initial() du code précédement cité.

Maxime
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 16 janv. 2009 à 07:20
0
Utile
bah... essaye sans le php...
toto    par exemple
car je suppute ( mais sans l'être ) que c'est ce que tu fais ?
           [mon Site] [M'écrire] Bul         
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 10:15
0
Utile
En faite c'est bien plus compliqué qu'il ne parait.
 Parce que même en mettant le code directement donc par exemple : test le problème est le même, le code source est ok, mais le contenu ne s'affiche pas. En revanche lorsque je fais un clique droit sur la iframe pour afficher la source voici ce qui apparait :

<HTML></HTML>
et c'est tout.
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 16 janv. 2009 à 11:02
0
Utile
ben oui ! pas du à quoi que ce soit d'autre qu'à l'utilisation la balise !
ce que tu met entre et , c'est pour
afficher lorsque le navigateur ne supporte pas les [I]Frame.
c'est ce qu'il y a dans le src qui est affiché
 ou ce qu'on met dans le Champ.body.innerHTML
 ( Champ est différent entre IE et FF )
          [mon Site] [M'écrire] Bul         
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 11:15
0
Utile
Pour le moment voilà ou j'en suis, à la fin de la fonction initial()
je charge le contenu ($contenu) dans la textarea, jusque là ok.

Après j'ai fais cela :
var tmp=document.getElementById("apercu_area");
Champ.body.innerHTML=tmp.value;
sachant que l'élément qui a l'id "apercu_area" c'est ma <textarea>
mais quand j'affiche les erreurs de script il me dit : "Champ.body est indéfini" alors que si je fais alert(Champ); cela fonctionne corrèctement, ma variable est bien définie.

Maxime
Commenter la réponse de cs_Dj Nam
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 11:19
0
Utile
Juste une petite erreur,
ma ligne de code ce n'est pas :
Champ.body.innerHTML=tmp.value;
mais :
Champ.body.innerHTML=tmp.innerHTML;

Maxime
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 16 janv. 2009 à 11:22
0
Utile
ben oui alors... un textarea c'est .value pas .innerHTML.
     [mon Site]  [M'écrire]  Bul         
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 11:30
0
Utile
Oui j'ai vu cela, mais on en reste sur le même problème :
"Champ.body à la valeur null ou n'est pas défini"

Maxime
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 16 janv. 2009 à 11:50
0
Utile
>>"Champ.body à la valeur null ou n'est pas défini"
ah ah ....
essaye après le onload ?

       

        <textarea name="txt" id="txt">exemple</textarea>

        <script>

            window.onload=function()

            {    switch (navigator.appName)   

                {    //         ===============================

                    case     "Microsoft Internet Explorer":

                    //         ===============================

                        Fen=window.frames['Saisie'];

                        Champ=Fen.document;

                        break;

                    //               =========

                    default:    //     sinon

                    //               =========

                        Champ=document.getElementById('Saisie').contentDocument;

                        Fen=document.getElementById('Saisie').contentWindow;

                        break;   

                }

                Champ.body.innerHTML=document.getElementById("txt").value;

            }

    </script>

ça baigne.... ne me demande pas pourquoi !

          [mon Site] [M'écrire] Bul         
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 14:10
0
Utile
Ok, merci bien dans ce cas je vais revoir mon code en me basant sur celui-là, on verra bien ce qu'il en ressortira. Et comme d'ab, si j'ai encore une erreur je reviendrais ici

Maxime
Commenter la réponse de cs_Dj Nam
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 14:13
0
Utile
Finalement tu as utilisé un .value pour la textarea ? Etrange, mais je vais essayer, jamais ne sait-on

Maxime
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 16 janv. 2009 à 14:23
0
Utile
ben oui ! comme j'ai disais, un textarea
possède un .value et pas de .innerHTML
          [mon Site] [M'écrire] Bul         
Commenter la réponse de Bul3
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 15:23
0
Utile
Rien à faire, quand je fais alert(Champ.body); ca me retourne : "null"

Maxime
Commenter la réponse de cs_Dj Nam
cs_Dj Nam 26 Messages postés dimanche 29 octobre 2006Date d'inscription 1 avril 2012 Dernière intervention - 16 janv. 2009 à 15:25
0
Utile
de la même manière un .innerHTML sur mon textarea me renvoi le contenu, alors qu'un .value est vide

Maxime
Commenter la réponse de cs_Dj Nam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 16 janv. 2009 à 15:37
0
Utile
bah.. essaye simplement l'exemple que je t'ai mis...
ça baigne.
donc tu dois avoir un zouzou je ne sais où....
[mon Site][M'écrire]Bul
Commenter la réponse de Bul3
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 17 janv. 2009 à 16:37
0
Utile
Bonjour,
...une autre approche pour l'accés au
contenu dune IFRAME, sur les différents navigateurs...
var O_iFrame = document.getElementById(
'ID_IFRAME').contentWindow.document;

pour reprendre l'exemple de
TheBul3 cela donne...
<html>
<head>

</head>


<textarea name ="txt"
id="txt">exemple</textarea>
<script type="text/javascript">

window.onload = function(){
  var O_iFrame = document.getElementById(
'Saisie').contentWindow.document;
  O_iFrame.body.innerHTML =
document.getElementById("txt").value;
}
</script>


</html>

Retour à ton sujet...
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Rien à faire, quand je fais alert(Champ.body);
ca me retourne : \"null\"
de la même manière un .innerHTML sur mon textarea me
renvoi le contenu, alors qu'un .value est
vide</td>
</td></tr></tbody></table>...n'inverses tu
pas simplement les réfèrences ?
;O)
Commenter la réponse de PetoleTeam

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.

Position du curseur dans une div - page 2