Décaler le curseur vers la gauche à chaque frappe

Version imprimable

29/06/2014, 17h55
spawns

Décaler le curseur vers la gauche à chaque frappe

Salut a tous,
j'aurai une petite question, je ne sais pas si cela est possible.
j'ai créer un petit formulaire pour que mon fils puisse faire des additions posées.
style :
123456
+ 136
-------
ici champs formulaire résultat

j'ai inclus dans mon input
Code :

Code:

<input type="text" name="resul" id="resul" dir="rtl" size="2" />

pour que l’écriture commence a droite, mais
je voudrais savoir s'il est possible au niveau du champs résultat de configurer ce champs pour qu'il puisse écrire de droite a gauche.
en gros décaler le curseur vers la gauche a chaque frappe.

comme je suis une grosse bille en javascript, un petit bout de code serait le bien venu.

Merci d'avance de votre aide

Cdt
30/06/2014, 05h35
Watilin

Je te le dis pour avoir essayé plusieurs fois, essayer de contrôler la position du curseur dans un champ de texte modifiable, c'est un vrai cauchemar.

Le mieux je pense, c'est d'avoir un input par chiffre, avec un attribut maxlength="1". Pour aller au plus simple, tu décides à l'avance du nombre de chiffres maximum et tu mets les input dans une <table>. Après, reste plus qu'à réagir aux keypress.

Voici un petit exemple : http://jsfiddle.net/vTZ7H/
30/06/2014, 07h18
arnogues

enlève le dir=rtl et mets simplemnet un style="text-align:right"
30/06/2014, 12h36
spawns

arnogues,
non cela ne fonctionne pas, car le curseur reste à droite apres chaque frappe.

Watilin,
j'ai essayé l'exemple mais cela ne fonctionne pas. j'ai impression que le keypress n'est pas pris en compte.
pourtant j'ai fais un copier/coller du code.

une idée ???
30/06/2014, 13h08
SpaceFrog

curieux, parce que là il fonctionne ...

Bonjour,

Citation:

Envoyé par Watilin

essayer de contrôler la position du curseur dans un champ de texte modifiable, c'est un vrai cauchemar.

cela se pratique facilement pour peu que l'on laisse le temps aux actions par défaut des navigateurs de faire leur ouvrage, pour cela il suffit donc de différer la fonction via un setTimeout.

sur base d'une fonction de mise en position du curseur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function setCursorPosition( obj, pos){
  // get l'element
  var oText = (typeof obj === 'object') ? obj : document.getElementById(obj);
  // si existe
  if( oText){
    // mise du focus
    oText.focus();
    // en direct si supporte
    if( typeof oText.selectionStart != "undefined"){
      oText.setSelectionRange( pos, pos);
    }
    // IE and consort
    else{
      // create range
      var oRange = oText.createTextRange();
      // deplacement curseur
      oRange.move('character', pos);
      // select this
      oRange.select();
    }
  }
}

ll faudra donc faire par exemple...

Code:

1
2
3
4
5
6
var oCtr =document.getElementById('id_input');
oCtr.onkeypress = (function(obj){
    return function(){
        setTimeout( function(){ setCursorPosition( obj, 0);}, 1);
    };
})(oCtr);

Exemple correspondant au besoin de spawns

Code:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[setCursorPosition]</title>
<style>
#id_input{
  text-align:right;
}
</style>
</head>
<body><input id="id_input" type="text" value="">
<script>
function setCursorPosition( obj, pos){
  // get l'element
  var oText = (typeof obj === 'object') ? obj : document.getElementById(obj);
  // si existe
  if( oText){
    // mise du focus
    oText.focus();
    // en direct si supporte
    if( typeof oText.selectionStart != "undefined"){
      oText.setSelectionRange( pos, pos);
    }
    // IE and consort
    else{
      // create range
      var oRange = oText.createTextRange();
      // deplacement curseur
      oRange.move('character', pos);
      // select this
      oRange.select();
    }
  }
}
 
var oCtr =document.getElementById('id_input');
oCtr.onkeypress = (function(obj){
  return function(){
     setTimeout( function(){ setCursorPosition( obj, 0);}, 1);
  };
})(oCtr);
oCtr.focus();
</script>
</body>
</html>

ceci étant

Citation:

Envoyé par spawns

j'ai créer un petit formulaire pour que mon fils puisse faire des additions posées.

attendu du coté pédagogique de la page la solution de Watilin est de loin la plus adaptée/propre et permet de séparer les unités, dizaines, centaines ....

Citation:

Envoyé par spawns

...pourtant j'ai fais un copier/coller du code.

as tu pris soin de mettre le script en fin de BODY pour que les éléments existent dans le DOM avant d'être utilisés.

30/06/2014, 20h50
spawns

Merci NoSmoking pour tous ces infos,
j'ai testé et cela fonctionne parfaitement.

je dois tester l'autre solution en ajoutant en en fin de body (j'y avais pas pensé)

Encore merci de ton aide

Cdt