IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Décaler le curseur vers la gauche à chaque frappe


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de spawns
    Homme Profil pro
    Inscrit en
    Juillet 2004
    Messages
    558
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juillet 2004
    Messages : 558
    Par défaut 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 : 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

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 100
    Par défaut
    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/
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre expérimenté

    Profil pro
    Inscrit en
    Juillet 2012
    Messages
    183
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2012
    Messages : 183
    Par défaut
    enlève le dir=rtl et mets simplemnet un style="text-align:right"

  4. #4
    Membre éclairé Avatar de spawns
    Homme Profil pro
    Inscrit en
    Juillet 2004
    Messages
    558
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juillet 2004
    Messages : 558
    Par défaut
    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 ???

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    curieux, parce que là il fonctionne ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    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 : 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
    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.

  7. #7
    Membre éclairé Avatar de spawns
    Homme Profil pro
    Inscrit en
    Juillet 2004
    Messages
    558
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juillet 2004
    Messages : 558
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. curseur de la droite vers la gauche
    Par germanium dans le forum Windows XP
    Réponses: 2
    Dernier message: 17/05/2010, 20h27
  2. défilement sans fin vers la gauche
    Par floirac dans le forum Flash
    Réponses: 4
    Dernier message: 28/08/2006, 22h22
  3. Images défilantes de la droite vers la gauche
    Par paradeofphp dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 01/08/2006, 11h43
  4. [HTML]ouverture de liste déroulante vers la gauche
    Par sly33 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 18/05/2006, 17h33
  5. [VBA] Mise à jour à chaque frappe clavier
    Par Virgile59 dans le forum Access
    Réponses: 6
    Dernier message: 07/11/2005, 12h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo