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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  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 !

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