Est-il de croissance automatique de jQuery plugin pour les champs de texte?

Question

J'ai trouvé plusieurs plugins pour autogrowing un textarea, mais pas les champs de texte de saisie. Quelqu'un sait si il existe?

Answer 1

Voici un plugin qui va faire ce que vous êtes après:

EDIT: j'ai corrigé le plugin comme par Mathias commentaire. :)

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,'&nbsp;').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);

Answer 2

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

Il utilise la même approche que James réponse, mais ont certains des changements mentionnés dans les commentaires.

Vous pouvez voir un exemple vivant 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 vous suffit d'utiliser css pour définir min/max-width et utiliser une transition sur la largeur si vous voulez un joli effet.

Vous pouvez spécifier l'espace et de la distance à la fin, comme la valeur de la notation json pour les données-autosize-attribut d'entrée sur l'élément d'entrée.

Bien sûr, vous pouvez également initialiser à l'aide de jQuery

$("selector").autosizeInput();

Answer 3

Bon plugin, merci! J'ai changé deux choses qui semblait mieux dans mon projet.

1. J'ai changé le TESTEUR de balise à une DIV, pour éviter de se faire "Inattendue appel à la méthode ou de l'accès à la propriété." dans IE8 (même si votre démo fonctionne dans IE8. Y avait-il une raison particulière pour l'utilisation d'une balise HTML personnalisée?
2. Après la liaison instruction près la fin du code, j'ai ajouté un appel pour vérifier(), afin de redimensionner la zone de texte immédiatement après le chargement de la page, dans le cas où la zone de texte a déjà contenu dans au démarrage.

Espérons que cette aide.

Answer 4

je voulais juste partager une petite amélioration à James est super plugin. Ajouter ce code dans le CSS déclaration pour le testeur élément de compte pour le texte-tiret:

textIndent: 0

Sans elle, dans certains cas, le testeur élément peut, par inadvertance, hériter du texte-tiret d'ailleurs, ainsi jetant la taille de l'entrée.

Comme JP, je voulais aussi redimensionner l'entrée à la bonne taille dès le début, que je n'ai juste un peu différemment, en enchaînant les "trigger('keyup')" à la autoGrowInput appel de méthode, par exemple:

$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');

Comme une note de côté, je me suis inscrite sur ce site uniquement à des commentaires sur James solution et je suis un peu ennuyé pour trouver ce que je ne peux pas parce que je n'ai pas assez de points de réputation pour commencer avec. Désolé si j'ai raté quelque chose, mais cela semble signifier que je post ceci est un commentaire sur la question principale, plutôt que de façon plus appropriée sur James, de la solution.

Answer 5

J'avais aussi remplacé

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

pour

$(this).bind('keyup blur update', check).bind('keydown', function() {
    setTimeout(check);
});

afin d'obtenir le champ de redimensionnée à droite après il était de nouveau rendu par le navigateur. Il serait de débarrasser le champ de certains bavardage.