Décaler le curseur vers la gauche à chaque frappe

**spawns** · 29/06/2014, 17h55

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 :

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

<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

**Watilin** · 30/06/2014, 05h35

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/

**arnogues** · 30/06/2014, 07h18

enlève le dir=rtl et mets simplemnet un style="text-align:right"

**spawns** · 30/06/2014, 12h36

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

**SpaceFrog** · 30/06/2014, 13h08

curieux, parce que là il fonctionne ...

**NoSmoking** · 30/06/2014, 19h50

Bonjour,

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 :

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

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

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 html :

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

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

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.

**spawns** · 30/06/2014, 20h50

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

Décaler le curseur vers la gauche à chaque frappe

JavaScript

Vue hybride

Discussions similaires

Partager

Partager