Solved

Automatic sizing of HTML.TextAreaFor based on content

Posted on 2016-11-09
1
18 Views
Last Modified: 2016-11-11
I have an MVC 5 project with Bootstrap, and a form that relies upon the model for its field content. There are many fields which need to be textareas, to allow up to 255 characters; but I don't want to take up space unnecessarily. Ideally the textarea would begin with a single line, and grow as text is added via data entry (and shrink back as text is deleted).

                <div class="form-group row">
                    <div class="col-md-4">
                        <label>@Html.DisplayNameFor(model => model.FundAgreements)</label>
                    </div>
                    <div class="col-md-8">
                        @Html.TextAreaFor(model => model.FundAgreements, 1, 100, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.FundAgreements)
                    </div>
                </div>

Open in new window


When I had a simple HTML5 form, without Bootstrap, I was able to use the below in $(document).ready for <textarea>, but so far have been unable to modify it successfully to work with Html.TextAreaFor.

 <textarea id="FundAgreements" class="intake-textarea" rows="1" maxlength="255"></textarea>

Open in new window


// Auto resize textarea based on text entered
function resizeTextArea() {
    $(".intake-textarea").keyup(function(e) {
        $(this).height(30);
        $(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
    });
}

Open in new window

0
Comment
Question by:Bryant Farley
1 Comment
 
LVL 17

Accepted Solution

by:
Pawan Kumar Khowal earned 500 total points
Comment Utility
Try...

<textarea id="FundAgreements" placeholder="placeholder1" onkeyup="Resize(FundAgreements)"></textarea>

function Resize (FundAgreements) 
{
  var aare = document.getElementById(FundAgreements);
  aare.style.height = 'auto';
  aare.style.height = a.scrollHeight+'px';
}

Open in new window

0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
This video discusses moving either the default database or any database to a new volume.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now