文本框根据输入内容自适应高度的代码,让text
分类:计算机网络

复制代码 代码如下:

我们经常会看到很多的网站评论Textarea文本框可以根据用户输入的文字自动调整高度哦,这种效果非常不错我们这里介绍jquery autotextarea来实现此功能。

其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中。
源代码:
23:03文章更新:
感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器!
在线演示:
autoTextarea.js

直接看代码吧,很简单,也很实用。

<!doctype html>
<html>
<head>
<title>自动调整大小的textarea </title>
<meta charset = "utf-8" />
<style type = "text/css">
.editable{cursor:text; font-size:13px; color:#003366;width:80px;line-height:20px;height:20px;font-family:Arial;cursor:text;*overflow-y:hidden; }
</style>
</head>
<body>
<textarea class='editable' onkeydown ="if(event.keyCode==13) return false; " oninput="this.style.height='0px';this.style.height=(this.scrollHeight+'px');" onpropertychange="this.style.height=(this.scrollHeight+'px')" /></textarea>
</body>
</html>

例1

复制代码 代码如下:

复制代码 代码如下:

您可能感兴趣的文章:

  • 新浪微博字数统计 textarea字数统计实现代码
  • js操作textarea 常用方法总结
  • js限制textarea每行输入字符串长度的代码
  • JS TextArea字符串长度限制代码集合
  • 非主流的textarea自增长实现js代码
  • 基于jQuery的让textarea支持Ctrl+Z步步撤销功能
  • TextArea不支持maxlength的解决办法(jquery)
  • Javascript 文本框textarea高度随内容自适应增长收缩
  • javascript textarea光标定位方法(兼容IE和FF)
  • JavaScript实现统计文本框Textarea字数增强用户体验

 代码如下

/**
* 文本框根据输入内容自适应高度
* @author tang bin
* @version 0.3
* @see
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认20)
* @param {Number} 设置最大高度(可选)
*/
var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 20;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.maxHeight = elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

复制代码

测试代码:
<!DOCTYPE html>
<html xmlns="" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框根据输入内容自适应高度</title>
<style type="text/css">
#textarea { font: 1.4em/1.8em Arial; overflow: hidden; width: 550px; height: 6em; padding:10px; }
</style>
<script src="autoTextarea.js"></script>
</head>
<body style="background:#FBFCFD url(;
<textarea id="textarea"></textarea>
<script>
var text = document.getElementById("textarea"),
tip = '想写点什么..';
autoTextarea(text);// 调用
text.value = tip;
text.onfocus = function () {
if (text.value === tip) text.value = '';
};
text.onblur = function () {
if (text.value === '') text.value = tip;
};
</script>
</body>
</html>

    text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="40" rows="1" style="height:25px;" id="text"></textarea>
</body>
</html>

<!DOCTYPE html>
<html xmlns="" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框根据输入内容自适应高度</title>
<style type="text/css">
#textarea { font: 1.4em/1.8em Arial; overflow: hidden; width: 550px; height: 6em; padding:10px; }
</style>
<script  >
/**
 * 文本框根据输入内容自适应高度
 * @author  tang bin
 * @version  0.3
 * @see   
 * @param  {HTMLElement} 输入框元素
 * @param  {Number}  设置光标与输入框保持的距离(默认20)
 * @param  {Number}  设置最大高度(可选)
 */
var autoTextarea = function (elem, extra, maxHeight) {
 extra = extra || 20;
 var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
  addEvent = function (type, callback) {
   elem.addEventListener ?
    elem.addEventListener(type, callback, false) :
    elem.attachEvent('on' + type, callback);
  },
  getStyle = elem.currentStyle ? function (name) {
   var val = elem.currentStyle[name];
   
   if (name === 'height' && val.search(/px/i) !== 1) {
    var rect = elem.getBoundingClientRect();
    return rect.bottom - rect.top -
     parseFloat(getStyle('paddingTop')) -
     parseFloat(getStyle('paddingBottom')) + 'px'; 
   };
   
   return val;
  } : function (name) {
    return getComputedStyle(elem, null)[name];
  },
  minHeight = parseFloat(getStyle('height'));
 
 elem.style.maxHeight = elem.style.resize = 'none';
 
 var change = function () {
  var scrollTop, height,
   padding = 0,
   style = elem.style;
  
  if (elem._length === elem.value.length) return;
  elem._length = elem.value.length;
  
  if (!isFirefox && !isOpera) {
   padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
  };

 

  scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  
  elem.style.height = minHeight + 'px';
  if (elem.scrollHeight > minHeight) {
   if (maxHeight && elem.scrollHeight > maxHeight) {
美高梅网址,    height = maxHeight - padding;
    style.overflowY = 'auto';
   } else {
    height = elem.scrollHeight - padding;
    style.overflowY = 'hidden';
   };

您可能感兴趣的文章:

  • 基于jquery的让textarea自适应高度的插件
  • Javascript 文本框textarea高度随内容自适应增长收缩
  • jquery实现textarea 高度自适应
  • Jquery实现textarea根据文本内容自适应高度

   style.height = height + extra + 'px';
   scrollTop += parseInt(style.height) - elem.currHeight;
   document.body.scrollTop = scrollTop;
   document.documentElement.scrollTop = scrollTop;
   elem.currHeight = parseInt(style.height);
  };
 };
 
 addEvent('propertychange', change);
 addEvent('input', change);
 addEvent('focus', change);
 change();
};
</script>
</head>
<body style="background:#FBFCFD url( ">
<textarea id="textarea"></textarea>
<script>
var text = document.getElementById("textarea"),
 tip = '想写点什么..';
 
autoTextarea(text);// 调用

text.value = tip;

text.onfocus = function () {
 if (text.value === tip) text.value = '';
};
text.onblur = function () {
 if (text.value === '') text.value = tip;
};
</script>
</body>
</html>

下面再介绍一个只是调用方法有一点不错

我们来看看代码:

 代码如下

复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px; padding:0px;}
.dn{display:none;}
.chackTextarea-area{line-height:22px; font-size:14px; font-family:Arial; overflow:auto; padding:1px 5px; border:1px solid #CDCDCD; width:400px; height:40px;}
.content{width:420px; margin:0 auto; padding-top:20px;}
.content h1{font-size:16px; font-family:微软雅黑; font-weight:normal;}
</style>
<script type="text/javascript" src="/jquery-1.7.1.min.js"></script>
<script type="text/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);

</script>
</head>

<body>
<div class="content">
  <h1>Jquery实现 TextArea 文本框根据输入内容自动适应高度</h1><br>
  <textarea name="textarea" id="textarea" cols="60" rows="4" class="chackTextarea-area"></textarea>
</div>
<script type="text/javascript">
 //注意:调用代码一定是放textarea后面。
  $(".chackTextarea-area").autoTextarea({
  maxHeight:220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
  });
</script>
</body>

</html>

autotextarea来实...

本文由美高梅网址发布于计算机网络,转载请注明出处:文本框根据输入内容自适应高度的代码,让text

上一篇:JavaScript中的isXX系列是否继续使用的分析 下一篇:没有了
猜你喜欢
热门排行
精彩图文