position/ajout cursor dans un contenteditable

Version imprimable

Bonjour,

Voilà pour un projet personnel, j'aurais besoin de faire un truc mais impossible d'y arriver et j'ai beau parcourir le net impossible de trouver une réponse convenable :/

Donc j'essaye en faite dans une balise "code" avec le paramètre contenteditable de rajouter un "tab" à la position du curseur.

La personne appuie sur "tab" cela rajoute une tabulation et déplace le cursor après la tabulation.

Pour l'instant je n'arrive qu'à rajouter une tabulation mais je me prend la tête avec ce focus >_<

Voilà mon code pour add du texte déjà
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function insertTextAtCursor(text) { var sel, range, html; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(text)); } } else if (document.selection && document.selection.createRange) { document.selection.createRange().text = text; } }
Merci de votre aide !!

10/12/2012, 10h22
SylvainPV

La touche Tabulation sert à basculer d'élément en élément pour la navigation au clavier. A voir si tu tiens vraiment à sacrifier cette base d'ergonomie. Si c'est le cas, il faudrait essayer de bloquer la propagation de l'évènement, avec un event.preventDefault() dans ton onkeydown/up par exemple.

Peux-tu nous montrer le code du binding évènement ?

Oui pour ce que je desire faire c'est necessaire

Pour l'instant je fais juste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
  $('code').keydown(function(e) {
    var keycode   = (e.keyCode ? e.keyCode : e.which);
    if (keycode == 9){
	insertTextAtCursor("\t");
	return false;
    } 
  });
 
  function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(text));
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
  }

Ca fonctionne mais pas ce foutu focus() :o)

Essaie ceci :

Code:

1
2
3
4
5
6
7
 
 if (keycode == 9){
    insertTextAtCursor("\t");
    e.preventDefault();
    e.stopPropagation();
    return false;
}

10/12/2012, 13h56
shadow578

Pas mieux :/

Ca me mets mon curseur avant le tab en faite le probleme c'est qu'il faudrais qu'il se mette après.

J'ai tenter avec deux fonctions (getCursorPosition et setCursorPosition) que j'ai trouver sur le net mais rien de braillant.
10/12/2012, 15h03
shadow578

J'ai trouvé également un plugin jquery "a-tools" http://www.ampparit.com/projects/a-tools/demo.html
qui réalise en partie ce que je veux faire mais il ne marche pas sur des balises avec contenteditable seulement avec un textearea >_<
10/12/2012, 15h55
SylvainPV

Ah ok ton problème n'est pas que tu sors du champ mais que ton curseur est au mauvais endroit !

Dans ce cas j'ai trouvé ça : http://stackoverflow.com/questions/4...nteditable-div

Démo: http://jsfiddle.net/4N4ZD/357/
10/12/2012, 16h00
shadow578

8O8O8O8O8O8O

POWAAAA Merci énormément !!! Ca marche du tonnerre je suis bluffer >_<

Merci beaucoup