Clavier virtuel / souris

Version imprimable

09/06/2011, 11h34
lolo_92

Clavier virtuel / souris

Bonjour, je travaille sur un clavier virtuel du type :

http://michel.staelens.pagesperso-or...ISO-8859-1.htm

http://d2o0t5hpnwv4c1.cloudfront.net...emo/index.html
ce dernier a ma préférence pour le graphisme, le premier est mieux pour la lisibilité des caractères avec shift...

c'est sympa et ça fonctionne relativement bien.

Le seul "bug" concerne le point suivant :
j'ai écrit un texte (text ou textarea) et finalement, je veux ajouter au milieu d'autres caractères au texte. Je pointe avec la souris au beau milieu de ce qui a été saisi mais quand je tape quelques caractèes, ils s'ajoutent à la fin.

Donc il faut que l'intervention de la souris puisse replacer correctement le texte saisi par la suite. Je pense que ça doit être possible que l'évennement sur la textarea et la position du curseur dans dans la chaine la découpe en deux morceau A et B et que l'on ait ensuite A + testxe ajouté + B.

Si quelqu'un a une idée de ce que je dois faire, je pense que ça pourrait servir à beaucoup de monde !

Bonne jouréne, Laurent
09/06/2011, 20h40
NoSmoking
Bonsoir,
cela se passe
Code:

1 2 // Add the character $write.html($write.html() + character);
pour bien faire, enfin presque, sur le click dans la zone il te faudrais sauvegarder la position du curseur, donc récupérer la position, et insérer le caractère à cet endroit...enfin en gros à la louche...

Citation:

Envoyé par NoSmoking

Bonsoir,
cela se passe

Code:

1
2
// Add the character
$write.html($write.html() + character);

pour bien faire, enfin presque, sur le click dans la zone il te faudrais sauvegarder la position du curseur, donc récupérer la position, et insérer le caractère à cet endroit...enfin en gros à la louche...

hum, il me semble qu'il faut jouer avec les "selection" qui a une longueur de 0(car pas de selection, juste une position de cursor) et une position dans le textarea... d'après mes souvenirs c'est bien tordu et casse-tête. surtout que IE et firefox n'agissent pas du tout de la même manière, donc il te faudra 2 codes.

Enfin dans mes souvenirs, l'un des deux utilise la fonction "createRange" pour t'aider dans tes recherches google. ;)

edit: un petit bout de code trouvé sur la toile :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    function ModifySelection () {
            var textarea = document.getElementById("myArea");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    var newText = textarea.value.substring (0, textarea.selectionStart) + 
                        "[start]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[end]" +
                        textarea.value.substring (textarea.selectionEnd);
                    textarea.value = newText;
                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    textRange.text = "[start]" + textRange.text + "[end]";
                }
            }
        }