CODEWITHSUNDEEP
jquery
Soumya Behera
Soumya Behera

Reputation: 2512

Dynamic textarea is not expanding based on the input value on page load in Jquery

I have a textarea. I am able to dynamically expand the textarea when I type something in textarea. Its working as expected and I have given max-height to restrict the textarea expand to till 250px. Its happening when I type something in text area. But in initial page load, when textarea have more static data, the dynamic expand is not happening based on the initial textarea data.

Note- text area min-height should be 100% if there is only a single word ex:- "test", min-height 
should be 250px. 
        
Below is the code snippet I have tried : 
        


$(document).ready(() => {
  $('textarea').on('input', function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
  });
});
#AdditionalComments_div textarea {
  width: 100%;
  max-height: 250px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  resize: none;
  height: 100%;
  display: block;
  margin-left: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="AdditionalComments_div">
  <textarea cols="160" rows="5" id="FSLABB_AdditionalComments__c" oninput="this.setAttribute('value',this.value)">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. 
     Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.

    
    </textarea>
</div>

Upvotes: 0

Views: 37

Answers (1)

epascarello
epascarello

Reputation: 207511

Call trigger to execute the input method.

$(document).ready(() => {
  $('textarea').on('input', function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
  }).trigger('input');
});
#AdditionalComments_div textarea {
  width: 100%;
  max-height: 250px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  resize: none;
  display: block;
  margin-left: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="AdditionalComments_div">
  <textarea cols="160" rows="5" id="FSLABB_AdditionalComments__c" oninput="this.setAttribute('value',this.value)">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. 
     Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies </textarea>
</div>

Upvotes: 1

Related Questions