Plugin JQuery : agrandissement automatique d’un textarea avec JQuery Simpleautogrow

Pour un développement en cours, j’ai dû ajouter une fonction d’agrandissement automatique d’un textarea (à la facebook). Je me suis donc penché dessus en me disant qu’il y aurait certainement un plugin JQuery qui le ferait ! Et j’en ai trouvé plusieurs et c’est finalement le troisième qui a fonctionné le mieux dans mon cas.

Le premier (elastic) gérait très mal les textarea multiples sur une même page, le second (autogrow) gérait mal les bordures et les padding dans le calcul de la hauteur (effet d’agrandissement et de rétrécissement à chaque touche  appuyé).

jquery simpleautogrow

J’en ai donc essayé un troisième, simpleautogrow, qui a bien fonctionné (et qui est très facile à utiliser). J’ai dû néanmoins l’adapter pour qu’il tienne en compte les paddings verticaux (top et bottom) dans le calcul de la hauteur du textarea (on se retrouvait au final avec des lignes coupées en deux).

La modification fonctionne dans tous les cas avec un padding défini en pixels (« px »). Je ne dis pas que c’est la meilleur méthode mais c’était la plus rapide à mettre en oeuvre.

Je te laisse donc ici le code du plugin tel que je l’ai modifié (lignes 36 à 40) :

Edit 10/07 : ajout de diverses modifications effectuées par zero-zombie !

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
50
51
52
53
/*
 /*
* Simple Auto Expanding Text Area (0.1.2-dev)
* by Antti Kaihola (antti.kaihola.fi)
* akaihol+jquery@ambitone.com
*
* Copyright (c) 2009 Antti Kaihola (antti.kaihola.fi)
* Licensed under the MIT and BSD licenses.
*
* NOTE: This script requires jQuery to work. Download jQuery at
* http://www.jquery.com
*
* Improvements :
* arnaud-k http://blog.Arnaud-k.fr . Takes care of the textarea’s vertical paddings
* zero-zombie http://www.zzzombie.com. Takes the textarea’s initial height as a minimum + minor optimizations
*/
 
(function(jQuery) {
 
	jQuery.fn.simpleautogrow = function() {
		return this.each(function() { new jQuery.simpleautogrow(this); }); 
	};
 
	jQuery.simpleautogrow = function (e) {
		var self = this;
		var $e = this.textarea = jQuery(e)
			.css({overflow: ‘hidden’, display: ‘block’})
			.bind(’focus’, function() {
				this.timer = window.setInterval(function() {self.checkExpand(); }, 200); 
			})
			.bind(’blur’, function() { clearInterval(this.timer); });
 
			var reg=new RegExp((px), “g”);
			this.paddingSum = parseInt(this.textarea.css(”padding-top”).replace(reg,)) + parseInt(this.textarea.css(”padding-bottom”).replace(reg,));
			this.minHeight = 0; 
 
			this.border = $e.outerHeight() - $e.innerHeight();
			this.clone = $e.clone().css({position: ‘absolute’, visibility: ‘hidden’}).attr(’name’,)
			$e.height( Math.max(e.scrollHeight + this.border + this.paddingSum, this.minHeight))
			.after(this.clone);
			this.checkExpand(); 
	};
 
	jQuery.simpleautogrow.prototype.checkExpand = function() {
		var target_height = this.clone[0].scrollHeight + this.border + this.paddingSum;
		if (this.minHeight == 0) this.minHeight = target_height; // first call : target_height eq current height
		var target_height = Math.max(target_height, this.minHeight);
		if (this.textarea.height() != target_height)
		this.textarea.height(target_height + ‘px’);
		this.clone.attr(’value’, this.textarea.attr(’value’)).height(0); 
	};
 
})(jQuery);
Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

7 reponses a Plugin JQuery : agrandissement automatique d’un textarea avec JQuery Simpleautogrow

  1. zero-zombie dit :

    Je cherchais justement un truc du genre mais la version originale n’était effectivement pas trop fignolée.
    J’ai repris ta version et j’ai déporté la regexp pour qu’elle ne soit éxécutée qu’a l’initialisation plutôt que 5x par seconde.
    De plus le resize d’emblée dès le focus ne me convenait pas, j’ai fait en sorte que la taille initiale de la textare soit considérée comme un min-height. Du coup ça ne « bouge » pas dès que le curseur entre dans une textarea et ça donne un peu plus de consistance à l’ensemble.

    EDIT (par arnaud-k) : J’ai enlevé le code du commentaire et j’ai mis à jour le code dispo dans le billet avec les modifications apportées. Et j’ai ré-indenté le code aussi 😉

  2. zero-zombie dit :

    mmmh… sympa l’affichage 😉
    à vos indentateurs automatiques !

  3. arnaud dit :

    Désolé pour l’affichage, je vais mettre à jour le billez avec tes modifications 😉

  4. Jan Jarfalk dit :

    The bug related to using Elastic with multiple textareas on the same page came to my attention yesterday. A new version of elastic (1.6) has been uploaded and has a fix for this issue.

    http://www.unwrongest.com/projects/elastic/

    I don’t speak French and hope that it is OK that this comment is written in English.

    Just let me know if you give Elastic another try and find bugs or other issues and I will try to fix them.

    Thanks,
    Jan

  5. arnaud dit :

    Thanks for reading my blog ! Your comment in english is not a problem at all. I’m glad you made the effort to translate my post.

    I wiil re-try your JQuery plugin next week. If you have fix the multiple select bug I think tour plugin will be good. I will probably write a post about it !

    Thanks for your reactivity !

  6. zero-zombie dit :

    In fact, Elastic is much better than simpleautogrow.
    Simpleautogrow uses a very bad trick to achieve its effect : it doubles the number of textareas. it’s messing up the DOM so it’s hard to deal with it if you want to use generic form check methods.
    Plus it already includes my « min-height » patch (that doesn’t work with IE8, i’ve just checked) and implements a nice max-height option.
    I recommand elastic over simpleautogrow since it just adds plusses without minuses – that i noticed for now.

  7. Ping : Plugins JQuery en vrac sur unwrongest.com, par Jan Jarfalk | JQuery, PHP, html, design… // arnaud-k : un blog de geek

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *