您现在的位置: 365建站网 > 365文章 > 文本域textarea宽度和高度width及height自动适应的方法实例

文本域textarea宽度和高度width及height自动适应的方法实例

文章来源:365jz.com     点击数:1206    更新时间:2018-11-06 10:14   参与评论

文本域textarea宽度和高度width及height自动适应的方法实例1:

textarea文本域宽度和高度(width、height)自动适应变化处理

</>code

  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="UTF-8">    
  5. <title>div模拟textarea文本域轻松实现高度自适应</title>    
  6. <style>    
  7. h2{    
  8. text-align: center;    
  9. margin:50px auto;    
  10. }    
  11. .test_box {    
  12. width: 400px;    
  13. min-height: 20px;    
  14. max-height: 300px;    
  15. _height: 120px;    
  16. margin-left: auto;    
  17. margin-right: auto;    
  18. padding: 3px;    
  19. outline: 0;    
  20. border: 1px solid #a0b3d6;    
  21. font-size: 12px;    
  22. line-height: 24px;    
  23. padding: 2px;    
  24. word-wrap: break-word;    
  25. overflow-x: hidden;    
  26. overflow-y: auto;    
  27. border-color: rgba(82, 168, 236, 0.8);    
  28. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);    
  29. }    
  30. </style>    
  31. </head>    
  32. <body>    
  33. <h2>div模拟textarea文本域轻松实现高度自适应</h2>    
  34. <div class="test_box" contenteditable="true"><br /></div>    
  35. </body>    
  36. </html>


文本域textarea宽度和高度width及height自动适应的方法实例2:

</>code

  1. <HTML>  
  2.     <HEAD>  
  3.     <TITLE>textarea宽度、高度自动适应处理方法</TITLE>  
  4.     <!-- 控制宽度的自动适应 -->  
  5.     <style type="text/css">  
  6.     .comments {  
  7.      width:100%;/*自动适应父布局宽度*/ 
  8. overflow
  9. :auto;  
  10.       
  11. word-break
  12. :break-all;  
  13.     /*在ie中解决断行问题(防止自动变为在一行显示,主要解决ie兼容问题,ie8中当设宽度为100%时,文本域类容超过一行时,  
  14.     当我们双击文本内容就会自动变为一行显示,所以只能用ie的专有断行
  15. 属性
  16. “word-break或
  17. word-wrap
  18. ”控制其断行)*/ 
  19.     }  
  20.     </style>  
  21.     </HEAD>  
  22.     <BODY>  
  23.     <FORM   METHOD=POST   
  24. ACTION
  25. = " ">  
  26.     <!-- 主要控制高度的自动适应 -->  
  27.     <!-- 第一个是普通textarea -->  
  28.     <textarea class="comments" rows="10" cols="10"> </textarea>  
  29.     <!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 -->  
  30.     <textarea class="comments" rows=1   name=s1   cols=27   onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>  
  31.     <textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>   
  32.     </FORM>  
  33.     </BODY>  
  34.     </HTML>


关于textarea文本域的高度除了设置固定高度外,不会随着文本内容增加而高度自适应的问题.


解决这个问题的方法我们可以利用div模拟textarea的方式


<div id="textarea"  contenteditable="true" placeholder="请输入文字,不得少于100字"></div>


contenteditable="true"这个属性实现了div文本输入的功能


css上给div的高度设置成auto 这样高度就实现了自适应


当然用div模拟textarea时,我们没办法使用placeholder的属性.


当然这个一度让我烦躁的缺点也是有解决的办法的.


给div添加  placeholder="xxxx" 的属性


同时为div设置css,代码如下


</>code

  1. .textarea{
  2.     box-sizing: border-box;
  3.     width: 100%;
  4.     height: auto;
  5.     padding: 5px;
  6.     border:1px solid #ccc;
  7. }
  8. .textarea:empty:before{
  9.     content: attr(placeholder);
  10.     color:#bbb;
  11.     }
  12. .textarea:focus:before{
  13.     content:none;
  14.     }

大功告成!



如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (1206人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号