IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Positionner le caret dans un contenteditable


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut Positionner le caret dans un contenteditable
    Bonjours à tous!

    Tout est dans mon titre : Comment positionner le caret à un endroit précis dans un bloc en contenteditable ?

    J'arrive d'ores et déjà à récupérer la sélection, à la modifier et à recréer une sélection autour du texte modifié mais rien à faire le focus se positionne au début du bloc...

    Merci à tous pour votre aide!

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    pour IE:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    var sel= document.body.createTextRange();
    pour ffx
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    var sel= document.createRange();
    ensuite regarde dans les propriétés de sel ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Comment je fais ça pour voir les propriétés de "sel" ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Un code vite fair juste pour visualiser
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var liste=""
    for (prop in sel){
     liste+=prop +' => '+sel[prop]+'<br/>';
    }
     
    document.body.innerHTML+=liste
    ce qui sous IE me donne:
    text =>
    boundingWidth => 0
    offsetLeft => 12
    boundingLeft => 12
    htmlText =>
    boundingTop => 17
    offsetTop => 17
    boundingHeight => 0
    et sous ffx :
    startContainer => [object HTMLDocument]
    startOffset => 0
    endContainer => [object HTMLDocument]
    endOffset => 0
    collapsed => true
    commonAncestorContainer => [object HTMLDocument]
    setStart => function setStart() { [native code] }
    setEnd => function setEnd() { [native code] }
    setStartBefore => function setStartBefore() { [native code] }
    setStartAfter => function setStartAfter() { [native code] }
    setEndBefore => function setEndBefore() { [native code] }
    setEndAfter => function setEndAfter() { [native code] }
    collapse => function collapse() { [native code] }
    selectNode => function selectNode() { [native code] }
    selectNodeContents => function selectNodeContents() { [native code] }
    compareBoundaryPoints => function compareBoundaryPoints() { [native code] }
    deleteContents => function deleteContents() { [native code] }
    extractContents => function extractContents() { [native code] }
    cloneContents => function cloneContents() { [native code] }
    insertNode => function insertNode() { [native code] }
    surroundContents => function surroundContents() { [native code] }
    cloneRange => function cloneRange() { [native code] }
    toString => function toString() { [native code] }
    detach => function detach() { [native code] }
    START_TO_START => 0
    START_TO_END => 1
    END_TO_END => 2
    END_TO_START => 3
    createContextualFragment => function createContextualFragment() { [native code] }
    isPointInRange => function isPointInRange() { [native code] }
    comparePoint => function comparePoint() { [native code] }
    getClientRects => function getClientRects() { [native code] }
    getBoundingClientRect => function getBoundingClientRect() { [native code] }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Merci pour cette information,

    Effectivement j'utilise quelques une de ces méthodes comme ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    el("editable").focus();
    var range = document.createRange();	
    range.setStart(el("editable"), 1);
    range.setEnd(el("editable"), 2);
    var objet_selection = window.getSelection();
    objet_selection.addRange(range);
    Je ne vois pas comment et/ou quel méthode permet de positionner le curseur.
    As-tu un exemple s'il te plait?

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    setStart par exemple ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Non setStart détermine le début de la sélection et pas la position du curseur...

    Le premier argument est l'élément html qui dois recevoir la sélection, le deuxième argument est le numéro du noeud où commence la sélection.

    Tu peux essayer mon script tu verras ça ne positionne pas le curseur.
    D'ailleurs si tu pouvez le tester je saurai si le problème vient d'une autre partie de mon script ou non.

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    as tu essyé une unsertion de vide à l'endroit voulu avec un setStart=setEnd ??
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Je viens de tester le curseur se positionne au début du div éditable.

    Exemple:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <div id="editable" class="editable" contenteditable="true">xxxxx<b>yyyyy</b>zzzzz</div>
    <script type="text/javascript">
    function el(id)
    {
    	return document.getElementById(id);
    }
     
    el("editable").focus();
    var range = document.createRange();	
    range.setStart(el("editable"), 1);
    range.setEnd(el("editable"), 2);
    var objet_selection = window.getSelection();
    objet_selection.addRange(range);
    </script>
    Une fois le chargement terminé en écrivant directement du texte on se rend compte que le focus est au début et non à la zone sélectionnée.

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     if(ctrl.setSelectionRange)
    	{
    		ctrl.focus();
    		ctrl.setSelectionRange(pos,pos);
    	}
    ceci fonctionne sous FFX pour un textarea ....
    mais à priori pas pour un content editable ...

    sinon http://stackoverflow.com/questions/1...nteditable-div
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Merci SpaceFrog c'est effectivement le script que j'étais entrain d'étudier...La resélection se fait bien mais le curseur est toujours indomptable.

    En tout cas le principe d'insérer des spans avant et après le texte de remplacement pour recalculer une nouvelle sélection me parait nettement mieux que setStart et setEnd pour lesquelles il faut indiquer le noeud dans lequel se trouvera la selection...

    Que faire pour positionner le curseur ?

  12. #12
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Cela provient à mon avis du contenteditable ...
    Pour moi auras plus vite fait de placer temporairement un textarea au dessus de la zone...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  13. #13
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Je continue de penser que c'est possible eux le font : Ici.

    J'ai télécharger le source mais je n'ai pas encore eu le temps de la regarder, affaire à suivre!

    Reste en attente d'infos complémentaires.

  14. #14
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par xess91
    Je continue de penser que c'est possible eux le font : Ici.
    Comment ça eux le font

    Tout ce que je vois, c'est que le curseur se positionne à l'endroit où tu as cliqué dans le texte, il n'y a rien d'extraordinaire à ça ni de code pour le gérer
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  15. #15
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Trouvé sous IE ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     sel = document.selection.createRange();
      sel.moveStart('character', pos);
      sel.select();
    pas encore pour ffx
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    ha ben voilà

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nouvelle page 1</title>
    <script type="text/javascript">
    function placeCaret(obj,pos){
     
    obj=document.getElementById(obj); 
    obj.focus();
    if(document.selection) {
      sel = document.selection.createRange();
      sel.moveStart('character', pos);
      sel.select();
    }
    else{
      sel = window.getSelection();
      sel.collapse(obj.firstChild, pos+1);
      sel.select()
    }
    }
    </script>
    </head>
     
    <body>
    <div id="foo" contenteditable >
    ljhlkjhlkjh
    </div>
    <script type="text/javascript">
    placeCaret('foo',3)
    </script>
     
    </body>
    </html>
    Testé sous IE FFX et chrome

    ATTENTION : celà ne tient pas compte des balises html dans le div ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  17. #17
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Merci SpaceFrog,

    Je vais rajouter cela à mon script!

    Bovino, si j'ai bien compris le script Aloha transforme les divs en éditable lors d'un clic pour éditer à la volée les blocs.

    En tout cas merci pour l'investissement je suppose que pos vaut le nombre de caractères!?

  18. #18
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par xess91
    Bovino, si j'ai bien compris le script Aloha transforme les divs en éditable lors d'un clic pour éditer à la volée les blocs.
    Oui, c'est le principe de contenteditable.
    Pour preuve : http://dmouronval.developpez.com/editable/ : pas une once de JavaScript, pourtant tu peux cliquer où tu veux, le curseur sera correctement positionné en mode édition
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  19. #19
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Bonjour,
    cette discussion pourrait vous intéresser et notamment http://www.developpez.net/forums/d10...x/#post5763662

  20. #20
    Membre éclairé Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Par défaut
    Oui bovino tu as raison et c'est cela qui est bien, mais la particularité du script Aloha est qu'il exploite cette possibilité dans le cadre d'un wysiwyg qui fournit des fonctionnalités d'éditions de base et je présume sans iframe.

Discussions similaires

  1. positionner le focus dans un div
    Par bat dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 12/10/2005, 11h46
  2. Positionner des cellules dans une page
    Par BBe8127 dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 01/10/2005, 10h25
  3. Positionner le curseur dans un champ
    Par Smint dans le forum Access
    Réponses: 17
    Dernier message: 23/09/2005, 21h02
  4. Positionnement de ligne dans un TMemo
    Par tixu dans le forum Composants VCL
    Réponses: 4
    Dernier message: 18/12/2004, 11h45
  5. Réponses: 6
    Dernier message: 06/05/2004, 09h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo