<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. 内部类中class声明地方不同，效果不一样

    1.一个声明在类中,一个声明在类的方法中.在类中的方法中声明内部类,其方法中的内部类调用 内部类外中的变量,变量必须final class Outter{ int x1 = 0; public voi ...

  2. 主线程中一定不能放耗时操作，必须要开子线程，比如下载文件，不然会不让你拿到输入流--报错显示android.os.NetworkOnMainThreadException

    1.必须要开子线程来操作耗时操作,android.os.NetworkOnMainThreadException new Thread(new Runnable() { @Override publi ...

  3. （spring-第15回【IoC基础篇】）容器事件

    五个人在报社订阅了报纸.报社一旦有了新报纸,就派员工分别送到这五个人手里.在这个例子中,“报纸”就是事件,“报社”就是广播器,五个订阅者就是监听器.广播器收到事件,把事件传给监听器,监听器对事件做一些 ...

  4. 封装定制的Kali Live ISO

    打造专属的Kali ISO – 简介 封装定制的Kali ISO很简单,很有趣,很有意义.你可以用Debian的live-build脚本对Kali ISO进行全面的配置.这些脚本以一系列配置文件的方式 ...

  5. Manacher算法 , 实例 详解 . NYOJ 最长回文

    51 Nod http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1089 Manacher 算法 定义数组 p[i]表示以i为 ...

  6. BZOJ 2442 修剪草坪

    NOIP的时候一定要看清楚数据范围. #include<iostream> #include<cstdio> #include<cstring> #include& ...

  7. PHP中使用mysql处理结果集

    一.从结果集中将记录取出    mysql_fetch_row($result); 从结果集中取得一行作为枚举数组 mysql_fetch_row($result mysql_fetch_assoc( ...

  8. Redirect HTTP to HTTPS on Tomcat

    I have bought my SSL secure certificate and successfully installed on Tomcat with the keytool but ho ...

  9. 6、SQL基础整理（日期时间数据类型，转换函数）

    日期时间数据类型 *系统常量: @@DATEFIRST(返回当前时间) DATEADD 增加时间 语法:DATEADD (datepart , number , date ) select DATEA ...

  10. 怎么书写高质量jQuery代码

    众所周知,jQuery现在已经非常流行,百度新首页中也已经开始使用jQuery,今天总结下怎么书写更好的jQuery代码使jQuery代码更好.更快的执行,希望本篇jQuery教程一改大家以前不合理的 ...