javascript - Dynamically expand the height of a textarea when typing more then the max width -
how grow textarea horizontally when typing more max width of text area element? don't want see horizontal scrollbar.
rendered html
<textarea name="catchphrase" class="input-validation-error" id="catchphrase" aria-invalid="true" aria-required="true" aria-describedby="catchphrase-error" rows="2" cols="20" data-val-required="the catch phrase field required." data-val="true" data-val-maxlength-max="50" data-val-maxlength="the field catch phrase must string or array type maximum length of '50'." htmlattributes="{ id = profilecatchphrase, class = form-control }">i yoga sd;lasdlk asdks';aksd'asd 'asd';las ';asd'lasd';las'dl as'dla'sdl'asld as'd;las'dl; a;sdlka;sdklasd ;alsd;lkasda ;alskd;lkasd ;lkasd;lk</textarea>
before rendering html
<div class="form-group"> @html.labelfor(model => model.catchphrase, htmlattributes: new { @class = "control-label col-lg-2 col-md-2 col-sm-2 col-xs-2" }) <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"> @html.textareafor(model => model.catchphrase, new { htmlattributes = new { id = "profilecatchphrase", @class = "form-control" } }) @html.validationmessagefor(model => model.catchphrase, "", new { @class = "text-danger" }) </div> </div>
try this:
$('#catchphrase').on('input', function() { $(this).outerheight(38).outerheight(this.scrollheight); });
see: https://stackoverflow.com/a/34513436/4613398
jsfiddle:https://jsfiddle.net/3qmztmjj/
Comments
Post a Comment