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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -