<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. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

  2. 利用NTFS交换数据流隐藏文件

    利用NTFS交换数据流隐藏文件 发表于 2012 年 12 月 15 日 由 晴刃 这篇文章介绍一下Windows的NTFS文件系统的ADS(alternate data streams,交换数据流) ...

  3. 永不消逝的电波（三）：低功耗蓝牙（BLE）入门之如何调戏别人的小米手环

    0×00 前言 蓝牙(Bluetooth),一种无线技术标准,用来让固定与移动设备,在短距离间交换数据,以形成个人局域网(PAN).其使用短波特高频(UHF)无线电波,经由2.4至2.485 GHz的 ...

  4. apache环境Zf2要装的intl验证

    sudo apt-get install php5-intl

  5. Ubuntu下安装Apache mysql php的命令

    sudo apt-get install apache2 php5-mysql libapache2-mod-php5 mysql-serversudo apt-get install php5-gd ...

  6. 13、SQL基础整理（流程控制begin……end）

    流程控制 begin ……end将一个语句块包含起来,中间可以写任何语句 格式: begin--开始 select *from student end--结束 if declare @bianlian ...

  7. HDU5619 （费用流）

    Problem Jam's Store (HDU5619) 题目大意 有m个服务员,和n个顾客,给出每个服务员招待每个顾客的时间,每个服务员在同一时间只能服务一个顾客,询问所有顾客完成服务的最少时间. ...

  8. Ubuntu下安装lamp

    在Ubuntu里安装PHP环境时可以用恨简单的方法,直接用tasksel命令安装. 首先要安装这个命令: sudo apt-get install tasksel 然后,sudo tasksel in ...

  9. Java NIO UDP DEMO

    今天有人问我Netty的UDP怎么使用,我自己尝试的去写一个Demo,在网上搜索了一下,关于Netty的UDP实现还是很少的,所以,今天写下这篇文章用来记录今天的一个简单Demo实现 不使用Netty ...

  10. dede默认的表

    1.搜索关键词 表: dede_search_keywords 2.栏目关键 词描述 表 dede_arctype