WEB开发网
开发学院网页设计DivCss 输入框自动适应宽度 阅读

输入框自动适应宽度

 2010-11-30 20:17:32 来源:WEB开发网   
核心提示:很早以前就看过ytzong的《宽度自适应的输入框》这篇文章,感觉很不错,输入框自动适应宽度,非常详实,YUI的栅格决定宽度,体验上有点不爽,•还有一点非常值得注意的是:textarea的padding和margin一定要重置为0,内容决定高度确实很实用,个人认为ytzong的这个方法有两点非常麻烦:&bull

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

 < !DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> h2 { margin:0; padding:10px 0; font-size:14px; }  .mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }  .mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }  .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 }  .mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }  </style> <title>模拟宽度自适应的输入框</title> </meta></head>  <body> <h1>模拟宽度自适应的输入框</h1> <div class="mod-retweet"> <h2>模拟input的自适应:</h2> <div class="mod-retweet-textarea"> <input type="text" name="textfield" id="textfield"/> </div> </div> <hr /> <div class="mod-retweet"> <h2>模拟textarea的自适应:</h2> <div class="mod-retweet-textarea"> <textarea maxlength="500" rows="5" cols="45" name="bookcontent"></textarea> </div> </div> </body> </html>

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

Tags:输入 自动 适应

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接