Jquery下Textarea文本框自动适应高度实例

例1

 代码如下 复制代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<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';
   };

   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>
时间： 2024-12-21 09:43:15

Jquery下Textarea文本框自动适应高度实例的相关文章

Jquery实现 TextArea 文本框根据输入内容自动适应高度

原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,TextArea自动适应高度,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条.   如下图:   这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件 - Text

jquery 限制textarea文本框输入字符数量代码

jquery实例  代码如下 复制代码 (function($) {     $.fn.extend( {         limiter: function(limit, elem) {             $(this).on("keyup focus", function() {                 setCount(this, elem);             });             function setCount(src, elem) {   

jQuery实现限制textarea文本框输入字符数量的方法

  本文实例讲述了jQuery实现限制textarea文本框输入字符数量的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }

jQuery实现限制textarea文本框输入字符数量的方法_jquery

本文实例讲述了jQuery实现限制textarea文本框输入字符数量的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }); function setCount(src, elem) { var chars = src.value.lengt

jquery+php实现搜索框自动提示_jquery

今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便. 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! jquery+php实现搜索框自动提示 下面先主要讲解原理: 在search.htm

JS给Textarea文本框添加行号的方法_javascript技巧

本文实例讲述了JS给Textarea文本框添加行号的方法.分享给大家供大家参考.具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配. 运行效果截图如下: 在线演示地址如下: http://demo.jb

jquery+ajax+text文本框实现智能提示完整实例_jquery

本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord

文本框到最大长度时跳到下一个文本框

常见的有:手机号,电话,验证码,序列号 Java代码   <html>   <head>   <script type="text/javascript">   function checkLen(x,y)   {   if (y.length==x.maxLength)    {    var next=x.tabIndex    if (next<document.getElementById("myForm").len

JQuery中使文本框获得焦点的方法实例分析

这篇文章主要介绍了JQuery中使文本框获得焦点的方法,实例分析了jQuery针对文本框获得焦点的技巧,需要的朋友可以参考下 本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: