input text内容自适应宽度.docx

资源ID：3158781 资源大小：37.12KB 全文页数：2页
资源格式： DOCX 下载积分：6.99金币

快捷下载

会员登录下载

三方登录下载：

下载资源需要6.99金币

邮箱/手机：
温馨提示：	用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）
支付方式：
验证码：	换一换

加入VIP免费专享

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

input text内容自适应宽度.docx

input text内容自适应宽度input text内容自适应宽度很早以前就看过ytzong的宽度自适应的输入框这篇文章，感觉很不错，非常详实，YUI的栅格决定宽度，内容决定高度确实很实用。个人认为ytzong的这个方法有两点非常麻烦： <b><b><input type=”text”></b></b>需要套2层b标签；公式：.fluid-input-innerpadding-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-textareatextarea 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"><textareamaxlength="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。

注意事项

本文（input text内容自适应宽度.docx）为本站会员（牧羊曲112）主动上传，三一办公仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三一办公（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。