菜单

“autoresize”插件自动改变textarea大小

2011年09月15日 - jquery

The following options are available:

onResize – (type: Function) – A callback function fired every time the textarea is resized. Within the function ‘this’ refers to the textarea being resized.
animate – (type: Boolean) – If set to false no animation will take place, the height will immediately change when necessary. By default it’s set to true.
animateDuration – (type: Number) – Millisecond duration of animation, by default it’s set to 150.
animateCallback – (type: Function) – A callback function fired every time an animation completes. Note: not the same as the onResize callback.
extraSpace – (type: Number) – A pixel value to be added to the total necessary height when applied to the textarea. By default it’s set to 20. The idea behind this is to reassure users that they have more space to continue writing.
limit – (type: Number) – Once the textarea reaches this height it will stop expanding. By default it’s set to 1000.

The textarea will expand when required until the limit is reached, at which time it brings back the scrollbar. If you were to then delete all the contents of the textarea it would only return to it’s original size (no smaller). Also note that, even if you set ‘animate’ to true, the animation will only occur if the element is set to display:block; in the CSS.

An example implementation:

$(‘textarea#comment’).autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});

The plugin has been tested successfully in IE6/7, FF2/3, Opera9, Safari3 & Chrome.

 

from: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

发表评论

电子邮件地址不会被公开。 必填项已用*标注