Automatically adapt to the TextBox control of the input content (taken from Luo Yonghao complete works)

Regarding the problem of Web development above the UI layout, I will introduce one for one.

Automatically adapt to the TextBox control of the input content width, which can solve the contradiction between the reserved control size and the number of users in the layout. But because the control is limited to use as a single line input: (, when entering the big piece of text, you will not be your heart, then you will do an automatically adapt to the height of TEXTBOX.

The principle and the TextBox that adapts to the width is not much, but this is more simple, because the growth in the height direction does not destroy the overall layout effect of the page (if the width will squeeze away other elements in the page), You don't need to use Agent TextBox as an actual recorded container, and you will increase .</p> <p>Respond to the height of OnpropertyChange event, synchronization content, and <textarea>. Of course, if it is fully increased according to the content, it will become ugly because of too much content, a maximum height limit attribute is set. The control effect is as follows:</p> <p>AUTETEXTBOX DEMO: Maximum height is 200px but initotextbox demo of 3ROWS: high growth unlimited autotextBox demo:</p> <p>If the maximum attribute of the control is less than or equal to 0, the growth height is not limited.</p> <p>AttotextBox control source code</p> <p>#region attached AutoTextBox source control using System; using System.Web.UI; using System.Web.UI.WebControls; using System.ComponentModel; namespace WebExcel.UI.WebControls {/ ** //// <summary> /// Summary description for AutoLengthTextBox /// </ summary>. [DefaultProperty ( "Text"), ToolboxData ( "<{0}: AutoTextArea runat = server> </ {0}: AutoTextArea>")] public class AutoTextArea: System. Web.UI.WebControls.TextBox {[DefaultValue (200)] public int MaxHeight {get {object obj = ViewState [ "MaxHeight"]; return obj == null 200:? (int) obj;} set {ViewState [ "MaxHeight "] = Value;}} [defaultValue (60)] public int minHeight {Get {Object obj = viewState [" minHeight "]; return obj == NULL? 60: (int) obj;} set { ViewState ["MinHeight"] = value;}} protected override void onprender (Eventargs e) {this.attributes ["minHeight"] = this.minHeight.tostring (); if (this.Height == unit.empty) {THIS Hieight;} else {this.height = (int) math.max (this.minHeight, this.Height.Value);} Base.onPrender (E);} / ** //// <summary > //R render this control to the output parameter specified. /// <</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-49915.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="49915" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.041</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'XMJCKwVoWzaGMLrBPaxGrDKPTCv4QVn1kNy6EVltVhcIqd2kPH3pkjX7ikGNUSB74mVBhTAAXHufIePbwDmOsA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>