Textarea自动适用高度且无滚动条解决方案

chen_hh2 2008-06-06 02:46:46
加精
想实现Textarea自动适用高度且无滚动条，以下代码可以在IE下正常工作，在FF下基本功能也正常，
但是在FF下有个小问题：高度可自动增长，但是不能减小，请指教：
代码说明：onpropertychange：IE支持； oninput：FireFox支持；为了兼容IE和FF，所以加上了这个两个；


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<HTML>

<HEAD>

<TITLE>无滚动条Textarea自动适用高度</TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>



<BODY>

   <textarea id="test" rows="1" onpropertychange="this.style.height=this.scrollHeight+'px';"  oninput="this.style.height=this.scrollHeight+'px';" style="overflow:hidden;height:16px;"></textarea>

</BODY>

</HTML>
...全文
6768 80 打赏 收藏 转发到动态 举报
写回复
用AI写文章
80 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingqingcao22009 2012-04-07
  • 打赏
  • 举报
 回复
下面这个也不错，搬别人的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>萤火开发网</title>
</head>

<body>
<div id="holder">
<textarea id="content" rows="1" style="width:200px;*padding:6px 3px;overflow:hidden"></textarea>
</div>

<script type="text/javascript">
(function() {
var isIE = navigator.userAgent.indexOf('MSIE') != -1 && !window.opera;
var holder = G("holder");
var content = G("content");
var min = 1;
var max = 10;
var minH = min * 10;
var maxH = max * 10;
function G(id){
return document.getElementById(id);
}
function addEvent(obj, ev, handler){
if(window.attachEvent){
obj.attachEvent("on" + ev, handler);
}else if(window.addEventListener){
obj.addEventListener(ev, handler, false);
}
}
function autoHeight(){
if(!isIE) content.style.height = 0;
var h = content.scrollHeight;
if(h < minH) h = minH;
content.style.height = h + "px";
holder.style.height = (h + 6) + "px";
}
content.style.height = minH + "px";
holder.style.height = (minH + 6) + "px";
addEvent(content, "keyup", autoHeight);
addEvent(content, "keydown", autoHeight);
addEvent(content, "mouseup", autoHeight);
})();
</script>
</body>
</html>
lovingshu 2011-07-05
  • 打赏
  • 举报
 回复
学习了~
lattercyx 2011-05-16
  • 打赏
  • 举报
 回复
收藏 学习了
<html>
<head>

<meta http-equiv="Content-Type" Content="text/html; charset=gb2312"/>
<meta http-equiv="Content-Script-Type" Content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Author" content="Langtse"/>
<title>动态调整表单文本区高度</title>

<style>
*{border:0px solid silver;font-size:12px;padding:0px;margin:0px;}
body{padding:32px;}
textarea{border-width:1px;width:320px;overflow:hidden;padding:0px 12px;}
</style>

<script>
var oTimer,oText;
function getId(sId){return document.getElementById('oText');}
function fitOnce(){oText.style.height=oText.scrollHeight;}
function fitLoop(){oTimer=window.setInterval("fitOnce();",1);}
</script>

</head>
<body onload="oText=getId('oText');fitOnce();">

<form>
<textarea id="oText" onkeydown="fitLoop();" onchange="fitLoop();"
onblur="fitOnce();window.clearInterval(oTimer);">

动态调整表单文本区高度
全面兼容Avant,火狐Firefox,微软IE,遨游Maxthon,Opera
测试平台:
IE7.0;
Firefox2.0;
Avant11.5;
Maxthon2.1.3;


这个是可行的
Opera9.51;
</textarea>
</form>

</body>
</html>

beierniu 2011-05-01
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
<head>
<style type="text/css">
#xx{height:80px;font-size:12px;width:300px;}
</style>
</head>
<body>
<textarea id="xx">
<div>
</div>
</textarea>
<button onclick="textareaObj.checkHeight()">点击计算高度</button>
<script type="text/javascript">
var textareaObj = new (function(){
this.textarea = document.getElementById("xx");
this.xx = function(){
this.textarea.style.height = this.textarea.scrollHeight + "px";
}
this.checkHeight = function(){
alert("高度是"+this.textarea.scrollHeight + "px");
}
})();
window.onload = function(){
textareaObj.xx();
}
</script>
</html>
这段内容高度超过了80px，所以firefox下得到的高度是210px，但是第二段代码中，<textarea>中的代码只有<div></div>，但得到的高度却是80px，正好是在css中定义的，<textarea>的高度，只要把css中定义的高度去掉，就能得到文本的高度了，您可以修改代码然后运行试试。
rigouryj 2011-04-18
  • 打赏
  • 举报
 回复
ff下不能减小的问题，关键不是在于oninput或者其他的事件不响应，而是textarea的scrollHeight这个值在ff下没有减小，所以导致高度不能减小啊
uijkolp 2011-03-04
  • 打赏
  • 举报
 回复
<textarea onpropertychange="this.style.height = this.scrollHeight + 'px';" oninput="this.style.height = '';this.style.height = this.scrollHeight + 'px';">如果你们将来听到谢健这个名字，他是靠网站发家的。请想起我。这可能是目前全中国唯一一个无额外JS解决兼容这个问题的人。哇哈哈哈哈哈哈哈哈哈</textarea>
littlecc2009 2010-12-30
  • 打赏
  • 举报
 回复
[Quote=引用 36 楼 xie_yanke 的回复:]
那直接用onkeydown好了.删除,增加,两个浏览器都有变化,只是变化的不太尽人意罢了,我想下点儿力气,判断一下应该可以解决了吧?

<textarea id="test" rows="1" onkeydown="this.style.height=this.scrollHeight+'px';" style="overflow:hidden;height:16px;"></textarea……
[/Quote]
这个貌似FF不行？？删除也是缩小不了？？求原因
flxue 2010-09-24
  • 打赏
  • 举报
 回复
还真是痛苦啊！
寻找彩虹 2010-01-21
  • 打赏
  • 举报
 回复
学习 - 进步
xiangzi920 2009-06-30
  • 打赏
  • 举报
 回复
搜了很多，慢慢学习中，谢谢。
PleaseDoTellMeWhy 2009-03-13
  • 打赏
  • 举报
 回复
楼上的哥们，你写的那个IE7不理你！
royzhou1985 2009-02-02
  • 打赏
  • 举报
 回复
<TEXTAREA id=ds_jianzhi style="OVERFLOW: visible; WIDTH: 100%" name=ds_jianzhi rows=1>
ds_jianzhids_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，ds_jianzhi字段的内容，
</TEXTAREA>
langtse 2009-01-08
  • 打赏
  • 举报
 回复
<textarea id="oText" onkeydown="fitLoop();" onchange="fitLoop();"
onblur="fitOnce();window.clearInterval(oTimer);">

无论你使用鼠标还是键盘修改文本区的内容,
只要<textarea id="oText"...失去焦点,它就会自动调整高度!
而且在使用键盘编辑(添加或删除)时会实时调整高度!
langtse 2009-01-08
  • 打赏
  • 举报
 回复
[Quote=引用 67 楼 cuixiping 的回复:]
ff下比较费神，要考虑多种可能改变文本框值的事件，单单考虑oninput是不行的，要考虑直接输入、拖放、粘贴、剪切、脚本赋值、HTML初始值。
[/Quote]
不见得吧?不过还是蛮有挑战性的.
通篇看了一下,好像还没有完美的解决方案,
就自己编了一个,
又在各种常用浏览器(xp系统sp2)上测试了下.
应该是没有问题了.
现在贴出来,欢迎大家测评!


<?xml version="1.0" encoding="gb2312"?>



<html>

<head>



<meta http-equiv="Content-Type" Content="text/html; charset=gb2312"/>

<meta http-equiv="Content-Script-Type" Content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="Author" content="Langtse"/>

<title>动态调整表单文本区高度</title>



<style>

*{border:0px solid silver;font-size:12px;padding:0px;margin:0px;}

body{padding:32px;}

textarea{border-width:1px;width:320px;overflow:hidden;padding:0px 12px;}

</style>



<script>

var oTimer,oText;

function getId(sId){return document.getElementById('oText');}

function fitOnce(){oText.style.height=oText.scrollHeight;}

function fitLoop(){oTimer=window.setInterval("fitOnce();",1);}

</script>



</head>

<body onload="oText=getId('oText');fitOnce();">



<form>

<textarea id="oText" onkeydown="fitLoop();" onchange="fitLoop();"

 onblur="fitOnce();window.clearInterval(oTimer);">



动态调整表单文本区高度

全面兼容Avant,火狐Firefox,微软IE,遨游Maxthon,Opera

测试平台:

IE7.0;

Firefox2.0;

Avant11.5;

Maxthon2.1.3;

Opera9.51;

</textarea>

</form>



</body>

</html>


如果我在线,
你可以点这里直接预览!
cuixiping 2008-12-27
  • 打赏
  • 举报
 回复
IE下最容易：(一句overflow:visible搞定)
<textarea style="overflow:visible; width:100px;"></textarea>

ff下比较费神，要考虑多种可能改变文本框值的事件，单单考虑oninput是不行的，要考虑直接输入、拖放、粘贴、剪切、脚本赋值、HTML初始值。
yz_liuqiang 2008-12-11
  • 打赏
  • 举报
 回复
不需要写脚本，stye="overflow: visible;"
<textarea stye="overflow: visible; padding: 3px;"> </textarea>
chpqincai 2008-12-03
  • 打赏
  • 举报
 回复
这么多人贴啊,我也来个,嘛,这是看别人写的我测试通过了的....

<textarea name="textarea" id="textarea" style='overflow-y: hidden;height:20px' onpropertychange="this.style.height = this.scrollHeight + 'px';" oninput="this.style.height = this.scrollHeight + 'px';">我是内容
真的不会随内容变化吗？
其实不是的，只是楼主没有动脑筋而已</textarea>
<script>document.getElementById("textarea").style.height = document.getElementById("textarea").scrollHeight + 10 + "px";</script>
kuyesuifeng 2008-06-14
  • 打赏
  • 举报
 回复
MARK
yijiang 2008-06-14
  • 打赏
  • 举报
 回复
mark
laodan 2008-06-13
  • 打赏
  • 举报
 回复
嗯，觉得没必要在滚动条上下这么大的功夫
加载更多回复（60）
Antd-mobile UI库基础教程
针对React框架打造的移动端UI组件库，讲解细致，适用于初学者，快速上手实战操作，应对企业级开发
Angularjs中textarea标签随着输入内容自动变化，不出现滚动条
Angularjs中textarea标签随着输入内容自动变化，不出现滚动条。vue也同样可以使用
编写自适应高度的 textarea
文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适应其高度。 height: auto 有些初学者可能会想：自适应高度不就是 height: auto 么？可是你想一下，一个 textarea 没有手工给它指定过样式，不应该就默认是 h...
textarea的替代品div.contenteditable
标签定义多行文本属性控件，可容纳无限数量的文本，通过cols，rows属性设置textarea尺寸，当然也可以用css的width、height属性。 需求： textare作为文本输入固然好用，但是在实际项目中，通过平台识别出来的原文和译文内容，需要默认展示出所有的字幕内容，不能滑动，textare无法自适应文字的高度，用户使用非常不方便，每次都要去拖拽textare的高度。 第一波尝试：可编辑div（引发了其他问题，时间紧急直接放弃了） 刚开始采用了div.contenteditable可编辑的div，
JavaScript

87,915

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章