Javascript 文本框textarea高度随内容自适应增长收缩

直接上代码：
方案一：

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

textarea { height:100px; width: 300px; }

晴枫制作
http://jb51.net

// 最小高度
var minHeight = 100;
// 最大高度，超过则出现滚动条
var maxHeight = 300;
function ResizeTextarea(){
var t = document.getElementById('txtContent');
h = t.scrollHeight;
h = h > minHeight ? h : minHeight;
h = h > maxHeight ? maxHeight : h;
t.style.height = h + "px";
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

方案一在各浏览器中，文本框随内容自适应增长都没有问题；但在删除内容时收缩方面表现有所差异，IE、Opera表现正常，Firefox、Chrome、Safari不会收缩。原因是文本框内容高度小于文本框高度时scrollHeight值等于文本框高度，而不是文本框内容高度。
方案二：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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://jb51.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>

方案二在各浏览器中表现相同，皆可使文本框随内容自适应增长和收缩。但有个缺憾是在文本框高度增长的时候，文本框显示会有一个跳动。
另以上两个方案对于通过文本框右键菜单选择剪切、粘贴、删除等命令操作文本内容的情形都无效。可以说暂未找到完美的解决方案，留待以后再来研究。哪位同学如果有完美的方案的话敬请赐教！

其他方案：

  1. A different approach to elastic textareas 方案二即参考此文后实现
  2. Build an Elastic Textarea with Ext JS
  3. Smart TextArea: scrollHeight in IE, Firefox, Opera and Safari

原文链接:http://witmax.cn/javascript-textarea-auto-grow.html

赞 (0)

相关推荐

  • 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

    复制代码 代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&

  • JS实现固定在右下角可展开收缩DIV层的方法

    本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • JavaScript设置FieldSet展开与收缩

    JavaScript方法代码: 复制代码 代码如下: // 设置FieldSet高度方法,支持IE浏览器.Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩后更新图片SRC function FieldSetVisual( pTableID, pFieldSetID, pImageID ) { var objTable = documen

  • 原生JS仿QQ阅读点击展开、收起效果

    原生JS仿QQ阅读点击展开、收起效果

    使用JS技术实现QQ阅读类似的点击展开.收起效果,具体内容如下 一.定义展开函数showdiv(),实现点击"全文"按钮,全文展开. 1.点击展开函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏. 3.将紧跟其父元素之后的元素设置为显示. 二.定义收起函数hidediv(),实现点击"收起全文"按钮,全文内容隐藏. 1.点击收起函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设

  • js实现收缩菜单效果实例代码

    废话不多说,直接上代码: 有注释 复制代码 代码如下: <head>    <title></title>    <style type="text/css">        div        {            border: 1px solid black;            width: 100px;        }        ul .tit, .content        {            list-

  • JS模拟的QQ面板上的多级可展开的菜单

    QQ菜单 if (!document.getElementById) document.getElementById = function() { return null; } function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuId); var actuator = document.getElementById(actuatorId); if (menu == null ||

  • JS仿QQ好友列表展开、收缩功能(第二篇)

    JS仿QQ好友列表展开、收缩功能(第二篇)

    在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl

  • js iframe网站后台左右收缩型页面脚本

    mobaihuo网站后台免费提供_我们_www.jb51.net .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .a2{BACKGROUND-COLOR: A4B6D7;} mobaihuo网站后台免费提供 if(self!=top){top.location=self.location;} function switchSysBar(){ if (switchPoint.innerTe

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • jquery实现文本框textarea自适应高度

    浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="

  • javascript文本框内输入文字倒计数的方法

    本文实例讲述了javascript文本框内输入文字倒计数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>文本框内输入文字倒计数效果</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin maxLen = 100; //定义用户可以输入的最多字数 function checkMaxInput(obj) { if

  • 如何删除文本框里的文字内容中段落之间多余的分行

    除文本框里的文字内容中段落之间多余的分行 细胞色素C: 唯一能溶于水的细胞色素,在复合物Ⅲ和Ⅳ之间传递电子. function clearSuperabundanceBlankLine() {k=textareaName.value rgexp=/\r\n\s*?\r\n/m while(rgexp.test(k))k=k.replace(rgexp,"\r\n") textareaName.value=k} 去除多余空行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • javascript 文本框水印/占位符(watermark/placeholder)实现方法

    Firefox/Chrome/Opera从某一版本开始已经支持这一特性,但ie系列即使是ie9也还不支持,所以需要通过javascript来兼容这些不支持placeholder特性的浏览器. 普遍的做法 现在普遍使用的做法是通过表单元素的onfocus/onblur事件来改变value值,如下: 复制代码 代码如下: <input type="text" id="text1" /> <script> var el = document.get

  • Javascript文本框脚本实现方法解析

    在 HTML 中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用 <textarea>的多行文本框.这两个控件非常相似,而且多数时候的行为也差不多.不过,它们之间仍 然存在一些重要的区别. 相对而言,<textarea>元素则始终会呈现为一个多行文本框.要指定文本框的大小,可以使用 rows 和 cols 特性.其中,rows 特性指定的是文本框的字符行数,而 cols 特性指定的是文本框的字符列数 (类似于 <inpu> 元

  • JS控制文本框textarea输入字数限制的方法

    复制代码 代码如下: <html>     <head>     <title>JS限制Textarea文本域字符个数</title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <SCRIPT LANGUAGE="JavaScript">     <!--

  • JavaScript文本框脚本编写的注意事项

    在HTML中,有两种方式来表现文本框: 一种是使用input元素的单行文本,另一种是使用textarea的多行文本框. 使用input方式,必须添加type,设置为"text". size特性,可以指定文本框内能够显示的字符数. value属性可以设置文本框的初始值. maxlength特性则是用于指定文本框内可以接受的最大字符数. textarea的初始值则必须放在开始和结束标签之内. cols是文本框字符行数: rows是文本框字符列数: 另外,不能在HTML中给textarea指

  • 当鼠标滑过文本框自动选中输入框内容的JS代码分享

    复制代码 代码如下: <html><head><title>响应鼠标自动选中文本框内容</title></head><body><input id="a" type="text" value="请输入搜索词" onmouseover="selectInputContent(this.id)"/><script type="tex

随机推荐