1

This is my test html code:

function setValue() {
  $('.customTextAreaAuto').val($('.customTextAreaAuto').val() + "aaaaa\n");
}

$(function() {
  $('.customTextAreaAuto').val(function() {
    var currentVal = $(this).val();

    if ($(this).outerHeight() > this.scrollHeight) {
      $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight) {
      $(this).height($(this).height() + 1)
    }
    return currentVal;
  }).trigger('change');
});

$(function() {
  $('.customTextAreaAuto').on('input change', function() {
    if ($(this).outerHeight() > this.scrollHeight) {
      $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight) {
      $(this).height($(this).height() + 1)
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea name="textarea" id="textarea" class="customTextAreaAuto">a
      b</textarea>
<button onclick="setValue()">Click</button>

I use the "class" in jQuery and not "id" because in my case, the number of textarea will not be fix, depended on the data loaded the the page.

When input directly into , the height will automatically change to display all texts, but when click on button to change the value, the height does not change.

I know that I can add .trigger('change') to the code in function setValue(), but this is just a mock-up for changing value of textarea from another source. In my case, I am unable to use "trigger" when update the value due to design of the widget of the framework I used.

So, my question is how to let the textarea to know the value is changed to run the code that change the height.

bloodyKnuckles
  • 11,551
  • 3
  • 29
  • 37
N.D.H.Vu
  • 127
  • 1
  • 16
  • I'm confused: you know that you *have* to add `.trigger("change")` but don't add it, then ask what you need to do? Add `.trigger("change")` after setting `.val(newvalue)` in the click handler. – freedomn-m Sep 21 '22 at 10:37
  • Changing values etc does not raise user events such as click/change, so you need to trigger these yourself. If you can't call .trigger("change") (or it doesn't work) due to the widget/framework then that widget/framework *should* (*needs to*) have a method to update the UI when you change the value inside - eg rather than `$("textarea").val(...)` it might be `$("textarea").widget().setValue(...)`. So will entirely depend on the widget/framework/wrapper. – freedomn-m Sep 21 '22 at 10:39
  • Related question: [How can I detect when a textarea value changes using javascript?](https://stackoverflow.com/questions/41011933/how-can-i-detect-when-a-textarea-value-changes-using-javascript) – Yogi Sep 21 '22 at 11:55
  • @freedomn-m. Thanks for reply. What I do right now is to make a customize textarea widget using html and javascript for my project. Anything should be self-contain. Because of that, I cannot use the trigger on other controls. – N.D.H.Vu Sep 22 '22 at 03:09
  • Then your custom wrapper/widget should *listen* for the (standard) events on the controls they wrap. – freedomn-m Sep 22 '22 at 07:16

0 Answers0