Discussion :

[shadow578]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!

[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 ?

[shadow578]

Oui pour ce que je desire faire c'est necessaire

Pour l'instant je fais juste :

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
 
  $('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)

[SylvainPV]

Essaie ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[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 >_<