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 :

textbox et onKeyUp event -> largeur augmente auto quand texte trop long


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Inscrit en
    Juillet 2003
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Juillet 2003
    Messages : 5
    Points : 2
    Points
    2
    Par défaut textbox et onKeyUp event -> largeur augmente auto quand texte trop long
    Bonjour à tous,

    J'ai un petit souci avec un contrôle de type < input type="text" > pour lequel je gère l'event OnKeyUp par javascript (entre autres).

    Le problème que je constate (sous IE jusqu'à présent, pas sous FireFox) est que lorsque l'on ne spécifie pas de width à la textbox (ou en 100%), si on tape du texte qui dépasse la taille de la textbox, celle-ci s'agrandi au moment de la frappe de chaque caractère supplémentaire...

    J'ai isolé le problème comme provenant du traitement effectué dans le OnKeyUp, mais sans trop comprendre pourquoi. Le fait que Firefox ne présente pas le problème me laisse supposer qu'il peut s'agir d'une subtilité quelconque dont je n'aurais pas connaissance.

    Je m'en remets donc à votre avis, en espérant vivement que quelqu'un puisse m'aider à résoudre ce problème.

    Note: evidemment, si je spécifie la taille du contrôle en taille fixe (ex: 200px), le problème n'est pas présent. Mais je ne peux pas me contenter de cette restriction car je doit pouvoir laisser la possibilité au contrôle de fonctionner comme un input traditionnel.


    Je gère par Javascript l'event OnKeyUp afin de traiter le contenu de la textbox avec la fonction suivante :

    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    function FormatNumber(textbox, decimalSeparator, decimalDigits, groupSeparator, groupDigits, enableGroupFormatting, currencySymbol, enableCurrencySymbol, allowNegative, negativeCss, negativeStyle)
    {
       var temp = textbox.value;
     
       temp = ExtractNumber(textbox.value, decimalSeparator, decimalDigits, allowNegative);
     
       // Strip negative sign and hold the information in a boolean value
       var isNegative = temp.length > 0 && temp.charAt(0) == '-';
       temp = temp.replace('-', '');
     
       // Strip non significant zeros (ea : 000052 --> 52)
       temp = RemoveNonSignificantZeros(temp, decimalSeparator)
     
       // Apply Style Formatting
       ApplyStyleFormatting(textbox, isNegative, negativeCss, negativeStyle);
     
       // Check if it is necessary to split decimal and integer value
       if ((decimalDigits > 0) && (temp.indexOf(decimalSeparator) != -1))
       {
          // Split value into decimal and integer part
          var intPart = ent = temp.split(decimalSeparator)[0];
          var decPart = temp.split(decimalSeparator)[1];
     
          // Rebuild the whole value by joining integer, separator and decimal part
          temp = ApplyGroupSeparator(intPart, groupSeparator, groupDigits, enableGroupFormatting) + decimalSeparator + decPart;
       }
       else
       {
          temp = ApplyGroupSeparator(temp, groupSeparator, groupDigits, enableGroupFormatting);
       }
     
       // Add the negative sign if needed
       if (allowNegative && isNegative)
       {
          // only added if value is not empty
          temp = "-" + temp;
       }
     
       // Add the currency symbol if needed
       if (enableCurrencySymbol)
       {
          // only added if value is not empty
          temp = (temp == "") ? temp : currencySymbol + " " + temp;
       }
     
       textbox.value = temp;	
    }
    Merci d'avance pour tout conseil utile !

  2. #2
    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 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    j'ai du mettre un truc dans les propositions de code source ou de faq ...
    je te retrouve le lien ...
    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 !

  3. #3
    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 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    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 !

  4. #4
    Candidat au Club
    Inscrit en
    Juillet 2003
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Juillet 2003
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    Merci pour la réponse mais je ne vois pas trop en quoi ca résoud le problème...

    Peut-être ne me suis-je pas bien expliqué.

    En gros, je mets ma textbox dans une celle d'une table, sans en spécifier la largeur. Elle prend donc par défaut la largeur disponible dans la cellule. Ensuite, je tape du texte dedans... :

    '1'
    '12'
    '123'
    '1234'
    '12345'
    ...

    ainsi de suite jusqu'à ce que le texte remplisse la largeur 'visible' de la textbox. Si je continue à taper, le comportement attendu (normalement) serait que le texte le plus à gauche dans la textbox disparaisse pour afficher le texte le plus à droite (l'effet normal de scroll dans une textbox quoi) mais ici mon problème c'est que la textbox s'agrandit au lieu de garder sa taille et de scroller son contenu.

    Donc, au lieu d'avoir :
    (supposons que je tape 01234567891)

    -----------
    | 4567891 |
    -----------

    j'obtiens ca :

    ---------------
    | 01234567891|
    ---------------

    et au plus je tape des caractères dans la textbox, au plus elle s'agrandi...

    Je sais que ce comportement est du à la gestion de mon event OnKeyUp et ce que j'y fais car si je le retire le problème disparait.

  5. #5
    Candidat au Club
    Inscrit en
    Juillet 2003
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Juillet 2003
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    Aucune idée de la cause de ce problème ?

  6. #6
    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 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    si ... IE
    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 !

  7. #7
    Candidat au Club
    Inscrit en
    Juillet 2003
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Juillet 2003
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    oui j'avais déjà pu m'en rendre compte ...

    Cela étant dit, personne n'a une petite idée sur un paramètres contrôlable par quelque moyen que ce soit (javascript, css, html) permettant d'empêcher ce défaut particulier ?

    Merci d'avance !

  8. #8
    Membre averti Avatar de linar009
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    497
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations forums :
    Inscription : Juillet 2006
    Messages : 497
    Points : 323
    Points
    323
    Par défaut
    Pourquoi dis-tu que tu ne peux lui imposer une taille fixe ?

Discussions similaires

  1. Réponses: 4
    Dernier message: 18/12/2007, 10h56
  2. Connaitre la largeur qu'occupera un texte
    Par FoxDeltaSierra dans le forum ASP.NET
    Réponses: 6
    Dernier message: 07/12/2007, 12h44
  3. Réponses: 1
    Dernier message: 27/02/2007, 10h29

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