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

jQuery Discussion :

Taille INPUT s'adaptant à son contenu


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Décembre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : Décembre 2015
    Messages : 44
    Points : 16
    Points
    16
    Par défaut Taille INPUT s'adaptant à son contenu
    Bonjour,

    J'ai 2 input :

    l'un qui se rempli par autocomplétion par une source json et l'autre qui se rempli en fonction du 1er input.

    Je voudrais que le contenu des 2 input s'affiche en totalité en bref que l'on lise le contenu sans toucher la souris.

    J'ai essayé différentes techniques en css mais sans succés.

    J'ai ajouté ce script :

    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
    <script type="text/javascript">
    jQuery( document ).ready( function( $ ) {
            var size= $('input[name="xbs_input"]').css('font-size');
            $( 'input[name="xbs_input"]').on( 'keydown change', function(e) {
                    $('<span style="font-size: ' + size + ';"></span>').insertAfter($(this));
                    var $span= $(this).next("span");
                    $span.text($(this).val());
                    var incert= (e.keyCode == 8) ? 0 : 10;
                    if ($span.width() >= 150) {
                            $(this).width( $span.width() + incert );
                    }
                    $span.remove();
            });
    });
    </script>

    ça fonctionne si j'écris dans mon input mais pas avec le remplissage automatique donc avez-vous une solution à me proposer?

    Merci

    Voici le code :

    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
    47
    48
    49
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>Abréviations médicales</title>
    		<link href="EasyAutocomplete/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
    		<script src="jquery/jquery-1.11.2.min.js"></script>
    		<script src="EasyAutocomplete/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>
    	</head>
     
     
     
    	<body>
     
    		<h1>EasyAutocomplete - json example</h1>
     
    		<label>Mot</label>
    		<input id="data-json" />
     
    		<label>Définition</label>
    		<input id="data-definition" class="form-control" type="textarea" value=""/>
     
     
     
     
    <script type="text/javascript">
    $(document).ready(function() {
        $("#data-json").easyAutocomplete({         
          url: "json/def.json",
          getValue: function(element) {
            return element.name;
          },
          list: {
           match: {
            enabled: true
           },
           onClickEvent: function(K,elm) {
              var value = $("#data-json").getSelectedItemData().code;
              console.log("name => " + value);
              $("#data-definition").val(value);
            }       
         }
       });
    });
     
    </script>
     
    	</body>
     
    </html>

  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 634
    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 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    C'est une question de trouver le bon, event ?
    on paste ?
    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 !

Discussions similaires

  1. ListView qui s'adapte à son contenu ?
    Par ®om dans le forum Composants graphiques
    Réponses: 11
    Dernier message: 07/09/2011, 15h33
  2. Réduire la taille de mon layout à son contenu
    Par azboul dans le forum Débuter
    Réponses: 1
    Dernier message: 02/09/2010, 01h20
  3. Réponses: 4
    Dernier message: 10/06/2009, 13h12

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