css textarea 高度自适应,无滚动条

2012-11-21 12:13| 发布者: xaagrpb| 查看: 1501| 评论: 0

摘要: 点评：用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. 用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y: ...

点评：用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条.

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条.
CSS代码:

复制代码

代码如下:

.t_area{
width:300px;
overflow-y:visible
}

首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝100%”这样的写法，具体示例：

复制代码

代码如下:

统一在FF、IE下的显示效果：
如果用textarea的属性字数宽度（cols）和行数（rows）来控制textarea的大小你会发现在，在IE和FF下的每行字数和文字的行数都不相同，而且在字数不足滚动的情况下，IE是默认有滚动条的，而FF是没有滚动条的。
那如何控制textarea在IE中和FF中相同的效果呢，其实比较简单：
1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；
2、让滚动条自适应：overflow-y:auto。
IE6中textarea宽度问题
textarea设了100%宽度,在IE7,FIREFOX都正常显示.但在IE6里只要输入文字就会自动增宽.
解决方法:在textarea外再加一个100%宽的div.
让人抓狂的ie6 ！！！！
overflow的允许属性：auto、visible、hidden
示例：
overflow-x:visible;
overflow-y:visible;

用js实现版本

提示：您可以先修改部分代码再运行

css实现版本（不能在标准页面中执行，已经就是不能加

）

复制代码

代码如下:

文本域自适应高度

在这里输入一些字符看一下，当超出初设的文本域高度时，文本域自动伸缩变高。 <br /></div><br /><br /><strong>另一个js版本textarea自适应高度 <br /></strong>项目中要求textarea自适应高度，在网上找到这个很好的方法 。记录下来以后备用。 <br /><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode($('phpcode8'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode8"> <br />function BodyOnLoad() <br />{ <br />var textarea= document.getElementById("textarea"); <br />textarea.style.posHeight=textarea.scrollHeight; <br />} <br /></div><br />scrollHeight：获取对象的滚动高度。 <br />posHeight：设置或获取以 height 标签属性指定的单位的对象高度。 <br />把方法加在body的onload事件上 <br /><body onload = "BodyOnLoad();"> <br />综上所述，兼容性什么的用css实现的稍微好点，但是非标准情况下，才可以。<br /><br /></td></tr></table>

<div id="diycontentbottom" class="area"></div>

</div>

<div id="diycontentclickbottom" class="area"></div>

</div>

</div>

<div id="diycontentrelatetop" class="area"></div>
<div id="diycontentrelate" class="area"></div>

<div id="diycontentcomment" class="area"></div>

</div>
<div class="sd pph">

<div class="bm">
<div class="bm_h cl">
<h2>相关分类</h2>
</div>
<div class="bm_c">
<ul class="xl xl2 cl"><li><a href="http://www.itbuluo.net/wangyezhizuo/html/">html</a></li>
<li><a href="http://www.itbuluo.net/wangyezhizuo/jiaoben/">JavaScript</a></li>
<li><a href="http://www.itbuluo.net/wangyezhizuo/aspnet/">asp.net</a></li>
</ul>
</div>
</div>

</div>
</div>

<div class="wp mtn">
<div id="diy3" class="area"></div>
</div>
<input type="hidden" id="portalview" value="1">	</div>
<div class="focus" id="sitefocus">
<div class="bm">
<div class="bm_h cl">
<a href="javascript:;" onclick="setcookie('nofocus_portal', 1, 0*3600);$('sitefocus').style.display='none'" class="y" title="关闭">关闭</a>
<h2>
站长推荐<span id="focus_ctrl" class="fctrl"><img src="static/image/common/pic_nv_prev.gif" alt="上一条" title="上一条" id="focusprev" class="cur1" onclick="showfocus('prev');" /> <em><span id="focuscur"></span>/1</em> <img src="static/image/common/pic_nv_next.gif" alt="下一条" title="下一条" id="focusnext" class="cur1" onclick="showfocus('next')" /></span>
</h2>
</div>
<div class="bm_c" id="focus_con">
</div>
</div>
</div><div class="bm_c" style="display: none" id="focus_1">
<dl class="xld cl bbda">
<dt><a href="http://www.itbuluo.net/article-1483-1.html" class="xi2" target="_blank">网页设计中的交互：关于分页问题的浅谈</a></dt>
<dd class="m"><a href="http://www.itbuluo.net/article-1483-1.html" target="_blank"><img src="http://www.itbuluo.net/data/attachment/portal/201211/21/121339lrll6lhmxtte11tx.jpg" alt="网页设计中的交互：关于分页问题的浅谈" /></a></dd>
<dd>点评：分页在网站设计中是一个比较常见的问题.
交互浅谈：分页 脚本之家
　　作用：跳转到上一个页面或下一个页面。
　　元素：分页的基本元素有：上页+页码+下页(如标注1);总页码(如标注2);跳转页(如标注3);确认"按钮(如标注4);

场景：根据以上这些基本元素在不同的场景会有不同的组合
　　(场景1)19楼论坛:
　　论坛页面数量多的时候会达到上千页;分页的内容多数是顶贴或者是原创陆续更新帖子所以一般用户都会查看首页原创帖，然后又选择性地查看些留言页面。手动全部翻一遍的几率几乎为0;所以论坛性的分页会又以下特点：</dd>
</dl>
<p class="ptn cl"><a href="http://www.itbuluo.net/article-1483-1.html" class="xi2 y" target="_blank">查看 »</a></p>
</div>
<script type="text/javascript">
//var focusautoshow = 1;
var focus = new Array();focus[1] = '1';
var focusnum = 1;
if('undefined' == typeof(focus[1])) {
$('focus_ctrl').style.display = 'none';
}
if(!$('focuscur').innerHTML) {
var randomnum = parseInt(Math.round(Math.random() * focusnum));
$('focuscur').innerHTML = Math.max(1, randomnum);
}
showfocus();
var focusautoshow = window.setInterval('showfocus(\'next\', 1);', 5000);
</script>

<div id="ft" class="wp cl">
<div id="flk" class="y">
<p><a href="http://www.itbuluo.net/archiver/" >Archiver</a><span class="pipe">|</span><a href="http://www.itbuluo.net/forum.php?mobile=yes" >手机版</a><span class="pipe">|</span><a href="http://mihaiyoulan.taobao.com" target="_blank" >手机话费、游戏点卡充值中心</a><span class="pipe">|</span><strong><a href="http://www.itbuluo.net/" target="_blank">中国IT部落网</a></strong>
  <span id="tcss"></span><script type="text/javascript" src="http://tcss.qq.com/ping.js?v=1L6B" charset="utf-8"></script><script type="text/javascript" reload="1">pgvMain({"discuzParams":{"r2":"17972728","ui":0,"rt":"portal","pn":1,"qq":"000","logo":11},"extraParams":""});</script><script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc1be4cc37b337ff90d499e5160399b66' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32671149-1']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script type="text/javascript">

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36050951-1']);
  _gaq.push(['_trackPageview']);

</script>

<div id="g_upmine_menu" class="tip tip_3" style="display:none;">
<div class="tip_c">
积分 0, 距离下一级还需  积分
</div>
<div class="tip_horn"></div>
</div>
<script src="home.php?mod=misc&ac=sendmail&rand=1524789977" type="text/javascript"></script>
<span id="scrolltop" onclick="window.scrollTo('0','0')">回顶部</span>
<script type="text/javascript">_attachEvent(window, 'scroll', function(){showTopLink();});</script>
			<div id="discuz_tips" style="display:none;"></div>
			<script type="text/javascript">
				var discuzSId = '17972728';
				var discuzVersion = 'X2.5';
				var discuzRelease = '20120407';
				var discuzApi = '0.5';
				var discuzIsFounder = '';
				var discuzFixbug = '25000000';
				var discuzAdminId = '0';
				var discuzOpenId = '';
				var discuzUid = '0';
				var discuzGroupId = '7';
				var ts = '1524789977';
				var sig = '9f7c87de8b2ca93bb210c9d023e7866b';
				var discuzTipsCVersion = '2';
			</script>
			<script src="http://discuz.gtimg.cn/cloud/scripts/discuz_tips.js?v=1" type="text/javascript" charset="UTF-8"></script></body>
</html>

		自动登录	找回密码
密码			立即注册