"
utf-8
"
/>
<title>JQuery plugin textareaHeightAuto</title>
<meta name=
"
keywords
"
content=
""
/>
<meta name=
"
description
"
content=
""
/>
<script type=
"
text/javascript
"
src=
"
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
"
></script>
<style type=
"
text/css
"
>
*{margin:
0
;padding:
0
}
.textarea {overflow: hidden;margin: 50px;height: 100px;width: 400px;border: 1px solid #ccc;}
.button {padding: 5px 10px;cursor: pointer;}
</style>
</head>
<textarea name=
""
class
=
"
area
"
></textarea>
<textarea name=
""
class
=
"
area
"
></textarea>
<script type=
"
text/javascript
"
>
(function($){
$.fn.adaptiveTextarea
=
function(options){
$.fn.adaptiveTextarea.defaults
=
{
"
maxH
"
:
99999
,
"
minH
"
:
0
var
opts =
$.extend({},$.fn.adaptiveTextarea.defaults,options);
return
this
.each(function(){
var
$
this
= $(
this
);
var
defaultH = opts.minH || $
this
.height();
//
初始化
$
this
.css({
"
overflow
"
:
"
auto
"
,
"
resize
"
:
"
none
"
,
"
height
"
:defaultH +
"
px
"
$
this
.off(
"
propertychange input
"
).on(
"
propertychange input
"
,function(){
this
.style.height = defaultH +
"
px
"
;
if
(opts.maxH >=
opts.minH){
this
.style.height = Math.min(
this
.scrollHeight,opts.maxH) +
"
px
"
;
})(jQuery);
//
调用
$(function(){
$(
"
.area
"
).adaptiveTextarea({
minH:
80
,
maxH:
300
</script>
</body>
</html>
* @author 愚人码头
* 【jQuery插件】autoTextarea-文本框根据输入内容自适应高度
* 参数 maxHeight:null,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度
* 参数 minHeight:$(this).height()//默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示
* 更多http://www.css88.com/archives/3948
(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);
JS代码，默认的参数及调用：
//默认的参数
$(".chackTextarea-area").autoTextarea({
maxHeight:220,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度
minHeight:$(this).height()//默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示
$(".chackTextarea-area").autoTextarea({maxHeight:220});
<meta charset="utf-8" />
<title>JQuery plugin textareaHeightAuto</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
.textarea {overflow: hidden;margin: 50px;height: 100px;width: 400px;border: 1px solid #ccc;}
.button {padding: 5px 10px;cursor: pointer;}
</style>
</head>
<textarea id="J_Txt" class="textarea"></textarea>
<button type="button" id="J_Btn" class="button">destroy</button>
<script type="text/javascript">
;(function($){
var methods = {
init: function(options){
debug('textareaHeightAuto start !');
var main_opts = $.extend({}, $.fn.textareaHeightAuto.defaults, options);
return this.each(function(){
var $this = $(this);
debug($this);
//var opts = $.metadata ? $.extend({}, main_opts, $this.metadata()) : main_opts;
var opts = main_opts;
$this.data('textareaHeightAuto', opts);
$this.on(opts.eventName, function(){
var $target = $(this);
// 这里是比较重要的地方 必须先对textarea的高度进行设置，然后才能取 scrollHeight 的值
// 这是因为 scrollHeight 返回的是 元素内容的高度 + 滚动条可以滚动的高度值，明白了这点，下面就可以理解了
$target.height(opts.minHeight - opts.bottomHeight);// 增加这个间隔值是为了修复设置textarea高度时(特别是在最后一行回车时)跳动太大的情况
var scrollHeight = $target[0].scrollHeight + opts.bottomHeight;// 一加一减，相互抵消
if((scrollHeight) > opts.minHeight){
if(scrollHeight < opts.maxHeight){
$target.css({'overflow-y': 'hidden'}).height(scrollHeight);
}else{
$target.css({'overflow-y': 'auto'}).height(opts.maxHeight);
}else{
$target.css({'overflow-y': 'hidden'}).height(opts.minHeight);
destroy: function(){
return this.each(function(){
var $this = $(this),
data = $this.data('textareaHeightAuto');
$this.off(data.eventName);
$this.css({height: data.minHeight});// 不知道重置(还原?)textarea高度是否有必要
$this.removeData('textareaHeightAuto');
$.fn.textareaHeightAuto = function(method){
if(methods[method]){
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}else if(typeof method === 'object' || !method){
return methods.init.apply(this, arguments);
}else{
$.error('Method '+ method + ' does not exist on jQuery.textareaHeightAuto');
// 内部方法
function debug(obj){
if(window.console && window.console.log){
window.console.log(obj);
// 可以适当暴露一些可扩展的方法
//$.fn.textareaHeightAuto.fun = function(str){};
// 把默认参数放在外面，使得用户可以在插件之外就修改插件默认设置
// $.fn.textareaHeightAuto.defaults.bottomHeight = 0;// 修改插件的默认设置
// $('#textarea').textareaHeightAuto({bottomHeight: 0});// 修改应用插件的当前元素的默认设置
$.fn.textareaHeightAuto.defaults = {
maxHeight: 600,
minHeight: 100,
bottomHeight: 18,
eventName: 'paste cut keydown keyup focus blur'
})(jQuery);
$(document).ready(function(){
$('#J_Txt').textareaHeightAuto();
$('#J_Btn').on('click', function(){
$('#J_Txt').textareaHeightAuto('destroy');
$(this).attr('disabled', true);
</script>
</body>
</html>
$(
"
#textarea1
"
).textareaAutoHeight();
//
最大高度为100px
$(
"
#textarea2
"
).textareaAutoHeight({ maxHeight:
100
});
//
最小高度为50px，最大高度为200px
$(
"
#textarea3
"
).textareaAutoHeight({ minHeight:
50
, maxHeight:
200
});
$.fn.extend({
textareaAutoHeight: function (options) {
this
._options =
{
minHeight:
0
,
maxHeight:
1000
this
.init =
function () {
for
(
var
p
in
options) {
this
._options[p] =
options[p];
if
(
this
._options.minHeight ==
0
) {
this
._options.minHeight=parseFloat($(
this
).height());
for
(
var
p
in
this
._options) {
if
($(
this
).attr(p) ==
null
) {
$(
this
).attr(p,
this
._options[p]);
$(
this
).keyup(
this
.resetHeight).change(
this
.resetHeight)
.focus(
this
.resetHeight);
this
.resetHeight =
function () {
var
_minHeight = parseFloat($(
this
).attr(
"
minHeight
"
));
var
_maxHeight = parseFloat($(
this
).attr(
"
maxHeight
"
));
if
(!
$.browser.msie) {
$(
this
).height(
0
);
var
h = parseFloat(
this
.scrollHeight);
h
= h < _minHeight ?
_minHeight :
h
> _maxHeight ?
_maxHeight : h;
$(
this
).height(h).scrollTop(h);
if
(h >=
_maxHeight) {
$(
this
).css(
"
overflow-y
"
,
"
scroll
"
);
else
{
$(
this
).css(
"
overflow-y
"
,
"
hidden
"
);
this
.init();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<title>Javascript 实现 Textarea 自动伸缩，兼容IE6、IE7、IE8、IE9、Firefox、Safari、Chome、Opera</title>
<style type="text/css">
textarea {overflow:hidden;}
</style>
</head>
<textarea id="txt"></textarea>
</table>
<script type="text/javascript">
var minRows = 5;
// 最大高度，超过则出现滚动条
var maxRows = 12;
function autoResize(){
var t = document.getElementById('txt');
if (t.scrollTop == 0) t.scrollTop=1;
while (t.scrollTop == 0){
if (t.rows > minRows)
t.rows--;
break;
t.scrollTop = 1;
if (t.rows < maxRows)
t.style.overflowY = "hidden";
if (t.scrollTop > 0){
t.rows++;
break;
while(t.scrollTop > 0){
if (t.rows < maxRows){
t.rows++;
if (t.scrollTop == 0) t.scrollTop=1;
else{
t.style.overflowY = "auto";
break;
</script>
</body>
</html>
