自动适应输入内容高度的TextBox控件(摘自罗永浩全集)

关于Web开发上面UI布局的问题，我上次介绍了一个可以自动适应输入内容宽度的TextBox控件，它可以解决在布局时预留控件大小和用户数入内容多少上的矛盾。但是由于那个控件被限制了只能做为单行输入使用:(，在输入大块文本时就力不从心了，那么就再做一个可自动适应高度的TextBox。
原理和那个适应宽度的TextBox查不多，只是这个反而更加简单，因为在高度方向上增长不会破坏页面的整体布局效果(宽度上的如果在页内会挤走别的元素的)，所以就不需要使用Agent TextBox来作为实际录入的容器了，直接把增高就行了。<br /> 响应onpropertychange事件，同步内容和<TextArea>的高度。当然如果完全根据内容增高可能也会因为内容太多而变得难看，就设置了一个最大高度限制属性。控件效果如下： <br /> 最大高度为200px的AutoTextBox Demo: <br /> <br />最大高度为200px但初始高度为3rows的AutoTextBox Demo: <br /> <br />高度增长无限制的AutoTextBox Demo: <br /> <br /> <br /> 如果控件的MaxHeight属性小于或等于0，那么增长高度无限制。<br />附 AutoTextBox 控件源码#region 附 AutoTextBox 控件源码 <br />using System; <br />using System.Web.UI; <br />using System.Web.UI.WebControls; <br />using System.ComponentModel; <br /> <br />namespace Web<a href="http://www.111com.net/office/145249.htm" target="_blank">Excel</a>.UI.WebControls <br />{ <br /> /**//// <summary> <br /> /// Summary description for AutoLengthTextBox. <br /> /// </summary> <br /> [DefaultProperty("Text"), <br /> ToolboxData("<{0}:AutoTextArea runat=server></{0}:AutoTextArea>")] <br /> public class AutoTextArea : System.Web.UI.WebControls.TextBox <br /> { <br /> [DefaultValue(200)] <br /> public int MaxHeight <br /> { <br /> get <br /> { <br /> object obj = ViewState["MaxHeight"]; <br /> return obj == null ? 200 : (int)obj; <br /> } <br /> set <br /> { <br /> ViewState["MaxHeight"] = value; <br /> } <br /> } <br /> <br /> [DefaultValue(60)] <br /> public int MinHeight <br /> { <br /> </div> </div> </section> <section class="wrap-box"> <div class="g-tit"> <h2>相关文章</h2> </div> <ul class="s-list nobord notop"> <li> <a href="/art-424548.htm" class="s-card"> <div class="s-card-l"> <p class="tit">无限暖暖搭乘大鸟巴士怎么玩 公测第三天每日任务做法介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-27</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241227/logo_676e7453af0be1.jpeg" alt="无限暖暖搭乘大鸟巴士怎么玩 公测第三天每日任务做法介绍" /> </div> </a> </li> <li> <a href="/art-424549.htm" class="s-card"> <div class="s-card-l"> <p class="tit">奇迹暖暖绚光护佑搭配攻略 奇迹暖暖绚光护佑过关攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-27</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241227/logo_676e7454bd0191.jpeg" alt="奇迹暖暖绚光护佑搭配攻略 奇迹暖暖绚光护佑过关攻略" /> </div> </a> </li> <li> <a href="/art-424547.htm" class="s-card"> <div class="s-card-l"> <p class="tit">绝区零月城柳意像影画怎么样</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-27</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241227/logo_676e6ca03ddc51.jpeg" alt="绝区零月城柳意像影画怎么样" /> </div> </a> </li> <li> <a href="/art-424546.htm" class="s-card"> <div class="s-card-l"> <p class="tit">无限暖暖翩翩愿飞去怎么样</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-27</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241227/logo_676e6c9d9ff471.jpeg" alt="无限暖暖翩翩愿飞去怎么样" /> </div> </a> </li> <li> <a href="/art-424545.htm" class="s-card"> <div class="s-card-l"> <p class="tit">黑神话悟空1.0.12.16581版本更新公告</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-27</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241227/logo_676e507ca071a1.jpeg" alt="黑神话悟空1.0.12.16581版本更新公告" /> </div> </a> </li> <li> <a href="/art-424544.htm" class="s-card"> <div class="s-card-l"> <p class="tit">光遇12.27红石碎片在哪里</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-27</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241227/logo_676e507ba9f881.jpeg" alt="光遇12.27红石碎片在哪里" /> </div> </a> </li> </ul> </section> <section class="wrap-box"> <div class="g-tit"> <h2>精彩推荐</h2> </div> <ul class="card-box"> <li class="card3"> <a href="/app/101735.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e0450ce2d81.png" alt="王牌战争 安卓最新版本v16.4" /> </div> <p class="figure-head">王牌战争 安卓最新版本v16.4</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101700.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e03a61e99d1.png" alt="火柴人联盟2360版 安卓版v1.9.5" /> </div> <p class="figure-head">火柴人联盟2360版 安卓版v1.9.5</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101695.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e0396ebfd41.jpg" alt="奥特曼之格斗超人体验版 安卓最新版v9.1.0" /> </div> <p class="figure-head">奥特曼之格斗超人体验版 安卓最新版v9.1.0</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101670.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e033a685a71.png" alt="忍者新世代测试服 官方版v3.72.50" /> </div> <p class="figure-head">忍者新世代测试服 官方版v3.72.50</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="/app/101736.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e0458633a91.png" alt="创造与魔法 安卓版v1.0.0750" /> </div> <div class="figure-cont"> <p class="figure-head">创造与魔法 安卓版v1.0.0750</p> <div class="figure-desc"> <span>模拟经营</span> <span>创造与魔法 安卓版v1.0.0750</span> </div> <div class="figure-desc"> <p>创造与魔法是一款开放世界手游，在游戏中玩家可探索这个奇妙的世</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101730.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e044161c9d1.jpg" alt="创造与魔法修改版 最新版v1.0.0750" /> </div> <div class="figure-cont"> <p class="figure-head">创造与魔法修改版 最新版v1.0.0750</p> <div class="figure-desc"> <span>模拟经营</span> <span>创造与魔法修改版 最新版v1.0.0750</span> </div> <div class="figure-desc"> <p>创造与魔法无限点券版是款探索冒险游戏，该款游戏的操作还是蛮自</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101729.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e043ca53f71.png" alt="战争与文明官方版本 安卓版v1.7.16" /> </div> <div class="figure-cont"> <p class="figure-head">战争与文明官方版本 安卓版v1.7.16</p> <div class="figure-desc"> <span>模拟经营</span> <span>战争与文明官方版本 安卓版v1.7.16</span> </div> <div class="figure-desc"> <p>战争与文明是一款由上海邮通科技有限公司开发的战争策略游戏，这</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101722.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e042036f3c1.png" alt="迷你世界0元领皮肤无限迷你币版 最新安卓版v1.43.0" /> </div> <div class="figure-cont"> <p class="figure-head">迷你世界0元领皮肤无限迷你币版 最新安卓版v1.43.0</p> <div class="figure-desc"> <span>模拟经营</span> <span>迷你世界0元领皮肤无限迷你币版 最新安卓版v1.43.0</span> </div> <div class="figure-desc"> <p>迷你世界0元购买皮肤版是这款开放沙盒冒险建造游戏的特殊破解版</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101718.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241227/logo_676e041326a061.jpg" alt="创造与魔法无限经验版 安卓版v1.0.0750" /> </div> <div class="figure-cont"> <p class="figure-head">创造与魔法无限经验版 安卓版v1.0.0750</p> <div class="figure-desc"> <span>模拟经营</span> <span>创造与魔法无限经验版 安卓版v1.0.0750</span> </div> <div class="figure-desc"> <p>创造与魔法无限经验版是款可以改造环境，整个游戏的自由度还是蛮</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> </ul> </section> <footer class="foot"> <a href="/" class="logo-icon"> <img src="/mobile/images/logo2.png" alt="一聚教程网"> </a> <p>Copyright © 2010-2022</p> <p>111cn.net All Rights Reserved</p> </footer> <script> var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"}; </script> <script src="/jspc/funcmob.js" type="text/javascript"></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DSRRGRV1TL'); </script> <div class="back-top" style="display: block;"> <span class="icon-box"> <svg class="icon" viewBox="0 0 1024 1024"> <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path> </svg> </span> </div> </div> <script src="/js/stat.js"></script> </body> </html>