jQuery - saisie de texte à taille automatique (pas de textarea !)

Question

Comment redimensionner automatiquement le champ input type="text" avec jQuery ? Je veux qu'il ait une largeur de 100px au départ, puis qu'il s'élargisse automatiquement au fur et à mesure que l'utilisateur saisit du texte... Est-ce possible ?

Answer 1

Voici un plugin qui fera ce que vous cherchez :

Voir une démo ici : http://jsbin.com/ahaxe

Le plugin :

(function($){

$.fn.autoGrowInput = function(o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 0,
        comfortZone: 70
    }, o);

    this.filter('input:text').each(function(){

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<tester/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap'
            }),
            check = function() {

                if (val === (val = input.val())) {return;}

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                         || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

    });

    return this;

};

})(jQuery);

EDIT : Trouvé sur : http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields

Answer 2

Je ne pense pas qu'il existe une solution parfaite à ce problème car vous ne pouvez pas détecter la largeur réelle du texte saisi dans l'élément de saisie. Tout dépend de la police que vous utilisez, des paramètres de zoom du navigateur, etc.

Cependant, si vous pouvez choisir une police où vous pouvez réellement calculer le nombre de pixels du texte (c'est la partie la plus difficile mais je suppose que vous pouvez essayer de l'estimer d'une manière ou d'une autre). Vous pouvez l'utiliser pour modifier la largeur de votre champ de saisie.

 $('input').keyup(function () {
     // I'm assuming that 1 letter will expand the input by 10 pixels
     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters
     // are typed
     var minCharacters = 5;
     var len = $(this).val().length;
     if (len > minCharacters) {
         // increase width
         $(this).width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $(this).width(50);
     }
 });

Answer 3

Bonjour Je ne sais pas si vous cherchez encore mais je suis tombé sur ceci quand je cherchais un script pour faire la même chose. Donc j'espère que cela aidera toute personne qui essaie de faire cela, ou quelque chose de similaire.

function editing_key_press(e){
    if(!e.which)editing_restore(this.parentNode);
    var text = $('<span>')
        .html($(this).val())
        .appendTo(this.parentNode);
    var w = text.innerWidth();
    text.remove();
    $(this).width(w+10);
}

La logique de ce code est de placer le contenu sur la page dans un span, puis de récupérer la largeur de ce contenu et de le supprimer. Le problème que j'ai rencontré est que j'ai dû faire en sorte qu'il fonctionne à la fois sur la touche bas et la touche haut pour qu'il fonctionne correctement.

J'espère que cela vous aidera, peut-être pas car je n'utilise Jquery que depuis peu de temps.

Merci

George

Answer 4

J'ai un plugin jQuery sur GitHub : https://github.com/MartinF/jQuery.Autosize.Input

Elle utilise la même approche que la réponse de seize mais comporte certains des changements mentionnés dans les commentaires.

Vous pouvez voir un exemple en direct ici : http://jsfiddle.net/mJMpw/6/

Exemple :

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

Il suffit d'utiliser la css pour définir la largeur minimale/maximale et d'utiliser une transition sur la largeur si vous voulez un bel effet.

Vous pouvez spécifier l'espace / la distance jusqu'à la fin comme valeur en notation json pour l'attribut data-autosize-input de l'élément d'entrée.

Bien sûr, vous pouvez aussi simplement l'initialiser en utilisant jQuery

$("selector").autosizeInput();

Answer 5

J'ai utilisé réponse de seize mais a fait ces changements :

• Entre le réglage isValidWidthChange et // Animate width :

  if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) {
      newWidth = o.maxWidth;
      isValidWidthChange = true;
  }

  Ainsi, l'entrée s'agrandira autant que vous l'avez autorisé lorsque son contenu sera trop grand pour tenir dans la largeur maximale.

• Après $(this).bind('keyup keydown blur update', check); :

  // Auto-size when page first loads
  check();