快速业务通道

输入框自动适应宽度

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26

很早以前就看过ytzong的《宽度自适应的输入框》这篇文章,感觉很不错,非常详实,YUI的栅格决定宽度,内容决定高度确实很实用。
个人认为ytzong的这个方法有两点非常麻烦:
•<b><b><input type=”text”></b></b>需要套2层b标签;
•公式:.fluid-input-inner{padding-right:输入框左边框 + 输入框右边框 + 输入框左padding + 输入框右padding}也很麻烦经常忘记。
前段时间在一个项目中真好用到,同事啄米鸟模拟了一个宽度自适应的输入框,原理和ytzong的大致相同,但是解决了以上两个麻烦点。当然也有不足的地方。
看代码:
 

  1.  
  2. < !DOCTYPE HTML> 
  3. <html> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6. <style type="text/css"> 
  7. h2 { margin:0; padding:10px 0; font-size:14px; }  
  8. .mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }  
  9. .mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }  
  10. .mod-retweet .mod-retweet-textarea textarea {padding: 0;margin: 0; border:0 none; font-size:12px; height:80px; line-height:1.5em; width:100%; display:block }  
  11. .mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }  
  12. </style> 
  13. <title>模拟宽度自适应的输入框</title> 
  14. </meta></head> 
  15.  
  16. <body> 
  17. <h1>模拟宽度自适应的输入框</h1> 
  18. <div class="mod-retweet"> 
  19. <h2>模拟input的自适应:</h2> 
  20. <div class="mod-retweet-textarea"> 
  21. <input type="text" name="textfield" id="textfield"/> 
  22. </div> 
  23. </div> 
  24. <hr /> 
  25. <div class="mod-retweet"> 
  26. <h2>模拟textarea的自适应:</h2> 
  27. <div class="mod-retweet-textarea"> 
  28. <textarea maxlength="500" rows="5" cols="45" name="bookcontent"></textarea> 
  29. </div> 
  30. </div> 
  31. </body> 
  32. </html> 

可以发现一个非常讨厌的地方就是:
•textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的,textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后,输入框的边框在模拟的边框里面,体验上有点不爽。
•还有一点非常值得注意的是:textarea的padding和margin一定要重置为0,否则在webkit和opera下会有细小的bug。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号