<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<TITLE>枫芸志 » 文本框textarea高度自适应增长/伸缩</TITLE>

</HEAD>

<BODY>

    <textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea高度随内容自适应地增长，无滚动条

晴枫制作

http://www.111cn.net</textarea>

    <script type="text/javascript">

    // 最小高度

    var minRows = 5;

    // 最大高度，超过则出现滚动条

    var maxRows = 12;

 function ResizeTextarea(){

  var t = document.getElementById('txtContent');

  if (t.scrollTop == 0) t.scrollTop=1;

  while (t.scrollTop == 0){

   if (t.rows > minRows)

    t.rows--;

   else

    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>

　　

Textarea高度随内容自适应地增长，无滚动条的更多相关文章

  1. textarea高度随内容自适应

    最近遇到一个需求,视频名称初始有个生成值,并且支持可以手动修改,修改后名称过长后换行高度随内容增加.刚开始想到用input但是发现input不支持换行.后来用了textarea,用js来控制,下面是实 ...

  2. jQuery实现textarea高度根据内容自适应

    //jQuery实现textarea高度根据内容自适应 $.fn.extend({ txtaAutoHeight: function () { return this.each(function () ...

  3. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  4. 文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法

    textarea内容可从后台读取或手动输入,常规输入后中文和数字会出现换行问题 <style> #textarea { display: block; margin: 0 auto; ov ...

  5. textarea高度随着内容的多少而变化，高度可以删减

    问题:可以多行输入,并且输入框的高度随着内容的多少而变化,输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入,并且高度可以随着内容的增加而增加,但是当内容删减的时候 ...

  6. iframe高度随内容自适应的方法

    我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题. ...

  7. 左边label随着右边textarea高度自适应

    左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <s ...

  8. 实现textarea高度自适应内容，无滚动条

    最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

  9. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. poj3126 筛素数+bfs

    //Accepted 212 KB 16 ms //筛素数+bfs #include <cstdio> #include <cstring> #include <iost ...

  2. hdu4597 区间dp

    //Accepted 1784 KB 78 ms //区间dp //dp[l1][r1][l2][r2] 表示a数列从l1到r1,b数列从l2到r2能得到的最大分值 // #include <c ...

  3. unity3d基础02

    调试: 在MonoDevelop里可以断点调试,注意绑定unity进程 使用Debug.Log()打印信息 创建游戏对象: GameObject test = GameObject.CreatePri ...

  4. java多线程的协作

    java多线程之间相互协作,主要有join,  yield,  interupt(),  sleep,  wait,  notify,  notifyAll; join: 在一个线程A的代码里面调用另 ...

  5. 极客DIY：使用Arduino制作一块开源手表

    1 – 引言 首先让我们看下这个项目要考虑到的问题: .)使用100%Arduino兼容性硬件 .)保证存储器足够大可以装下大量的稍后会扩展的新内容 .)电量最少够1天用 .)BLE既是中枢设备又是外 ...

  6. 通过 itms-services 协议，发布或者分享 iOS 应用程序

    导读:itms-services 协议常用于 iOS 企业应用的无线部署,这可在不使用 iTunes 的情况下将内部软件发布或者分享给用户. 一.前期准备资料: 1.应用程序 (.ipa) 文件(使用 ...

  7. 让所有浏览器包括IE6即支持最大宽度又支持最小宽度。

    让所有浏览器包括IE6即支持最大宽度又支持最小宽度. _height  _width:针对ie6 css hack .yangshi{max-width:620px;min-width:1px;_wi ...

  8. CentOS下Web服务器环境搭建LNMP一键安装包

    CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...

  9. ZSDR101-跑成品MRP

    *&---------------------------------------------------------------------**& Report ZSDR101*&a ...

  10. Yii2中自带分页类实现分页

    1.首先写控制器层 先引用pagination类 use yii\data\Pagination; 写自己的方法: function actionFenye(){        $data = Fie ...