在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。如图:
新浪微博:(我的新浪微博,顺便做个广告,^_^)
腾讯微博:(我的腾讯微博,顺便做个广告,^_^)
这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件-autoTextarea:
[code=”javascript”]
(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
minHeight:$(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示
};
var opts = $.extend({},defaults,options);
return $(this).each(function() {
$(this).bind(“paste cut keydown keyup focus blur”,function(){
var height,style=this.style;
this.style.height = opts.minHeight + ‘px’;
if (this.scrollHeight > opts.minHeight) {
if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
height = opts.maxHeight;
style.overflowY = ‘scroll’;
} else {
height = this.scrollHeight;
style.overflowY = ‘hidden’;
}
style.height = height + ‘px’;
}
});
});
};
})(jQuery);
[/code]
调用:
[code=”javascript”]
$(“.chackTextarea-area”).autoTextarea({maxHeight:220});
[/code]
小改进大大提升体验,码头,你的评论是否也改自动适应内容高度?
哈~我做的那个想复杂了
@小山, 求分享
@, 哈哈~就是监听了按键,现在想想好傻哈
paste cut 有这两个事件吗?
最好超过高度之后,先 blur ,然后增加高度,最后再重新 focus 吧?? 闪那一下还是不好看的。
用 HTML5 的 oninput 事件感觉效果更好些,不过和IE的 onpropertychange 行为又有些不同,头疼的兼容性问题。
maxHeight的注释写的有误导,为null的时候是无限随文字增高,不是”不自动撑高”,害的我实验了半天
@Bernie, 悲剧啊!我没注意,谢谢提醒!
@ 改为true应该就可以了吧,不过如果不自动撑高的话,还需要这个插件么?建议设个默认的最大高度就行了。
为什么我试了这个代码木有效果,求指点
我也实现不了,当鼠标一触发输入框时,输入框就被撑高
如果右键粘帖也兼容下就perfect了!
当整个textarea的高度超过浏览器窗口的高度的时候,再输入文字的话,整个页面就是弹上弹下的