Je jouais avec le plugin jquery autogrow, qui augmente automatiquement la hauteur du texte lorsque le texte le nécessite. Le problème est que chaque fois que la touche est enfoncée, la bordure inférieure de la zone de texte s'agite de façon perceptible. Je ne suis pas sûr de ce que le problème pourrait être, donc je vais sortir un membre et poster les 132 lignes de ce plugin GPL ici. Des indices sur le problème ou comment le contourner?textarea La fonctionnalité de développement automatique s'agite à chaque frappe
/*
Auto Expanding Text Area (1.2.2) by Chrys Bader */
(function(jQuery) {
var self = null;
jQuery.fn.autogrow = function(o){
return this.each(function() {
new jQuery.autogrow(this, o);
});
};
/**
* The autogrow object.
*
* @constructor
* @name jQuery.autogrow
* @param Object e The textarea to create the autogrow for.
* @param Hash o A set of key/value pairs to set as configuration properties.
* @cat Plugins/autogrow
*/
jQuery.autogrow = function (e, o) {
this.options = o || {};
this.dummy = null;
this.interval = null;
this.line_height = this.options.lineHeight || parseInt(jQuery(e).css('line-height'));
this.min_height = this.options.minHeight || parseInt(jQuery(e).css('min-height'));
this.max_height = this.options.maxHeight || parseInt(jQuery(e).css('max-height'));;
this.textarea = jQuery(e);
if(this.line_height == NaN) this.line_height = 0;
// Only one textarea activated at a time, the one being used
this.init();
};
jQuery.autogrow.fn = jQuery.autogrow.prototype = { autogrow: '1.2.2' };
jQuery.autogrow.fn.extend = jQuery.autogrow.extend = jQuery.extend;
jQuery.autogrow.fn.extend({ init: function(){
var self = this;
this.textarea.css({overflow: 'hidden', display: 'block'});
this.textarea.bind('focus', function(){ self.startExpand() }).bind('blur', function() { self.stopExpand() });
this.checkExpand();
},
startExpand: function() {
var self = this;
this.interval = window.setInterval(function() { self.checkExpand()}, 400); },
stopExpand: function() { clearInterval(this.interval); },
checkExpand: function() {
if (this.dummy == null) {
this.dummy = jQuery('<div></div>');
this.dummy.css({
'font-size' : this.textarea.css('font-size'),
'font-family': this.textarea.css('font-family'),
'width' : this.textarea.css('width'),
'padding' : this.textarea.css('padding'),
'line-height': this.line_height + 'px',
'overflow-x' : 'hidden',
'position' : 'absolute',
'top' : 0,
'left' : -9999
}).appendTo('body');
}
// Strip HTML tags
var html = this.textarea.val().replace(/(<|>)/g,'');
// IE is different, as per usual
if ($.browser.msie){
html = html.replace(/\n/g, '<BR>new');
} else {
html = html.replace(/\n/g, '<br>new');
}
if (this.dummy.html() != html){
this.dummy.html(html);
if (this.max_height > 0 && (this.dummy.height() + this.line_height > this.max_height)){
this.textarea.css('overflow-y', 'auto');
} else {
this.textarea.css('overflow-y', 'hidden');
if (this.textarea.height() < this.dummy.height() + this.line_height || (this.dummy.height() < this.textarea.height())) {
this.textarea.animate({height: (this.dummy.height() + this.line_height) + 'px'}, 100);
}
}
}
}
});
})(jQuery);
Bonjour Chris, j'utilise ce plugin depuis quelques temps sans problème. Pouvez-vous poster une démo en ligne afin que nous puissions tester? Est-ce que cela se passe aussi dans tous les navigateurs? De plus, le site Web du plugin [autogrow] [1] apparaît comme un site d'attaque dans Firefox! Ce n'est pas bien sûr. [1]: http://www.aclevercookie.com/demos/autogrow_textarea.html – jay
@jeerose, j'utilise le plugin sur une page vierge que j'ai créée juste pour le tester, c'est donc le seul script en cours d'exécution + jquery 1.3.2. Je voudrais avoir un serveur en direct pour tester sur le moment, mais rien que je peux poster sur le forum ici :( – Chris
Il semble que d'autres ont signalé un comportement similaire avant, mais pour IE. Je ne sais pas pourquoi cela arrive à moi dans les deux FF et IE. Il n'est pas lié à la fonctionnalité du plugin lui-même, mais je devine quelque chose qui a à voir avec le calcul de la hauteur ou quelque chose de similaire – Chris