triggering keypress event on textarea not working jquery fiddle

Question

1) I have a textarea where I'm executing a function to autosize it after writing on it.... (it works well)

2) I have a button that it changes the class of the textarea, after clicking on it (add bg color, padding,etc.)

PROBLEM

After clicking on the button, Everything works well, but the padding-bottom appers to be 0 When it is supossed to show new 40px padding bottom. this padding is only restored after writing someting on the textarea....

I know this is because of this autosize function I added to the textarea

As a solution I wanted to trigger a .trigger("keypress"); after clicking the button but nothing

What am I doing wrong?

$('textarea').on('input', autosize);

function autosize() {
  var $this = $(this);
  $this
    .css({
      height: 'auto'
    })
    .css({
      height: $this.prop('scrollHeight')
    });
}

$(".BgChanger").on("click", function() {

  $(".main_textarea")
  .addClass("BgA");

});

.BgChanger {}

.BgA {
  width: auto;
  border: 1px solid red;
  background: green!important;
  text-align: center!important;
  font-size: 22px!important;
  color: white!important;
  font-weight: bold;
  padding: 50px 20px 40px 20px;
}

.main_textarea::-webkit-scrollbar {
  display: none;
}

.main_textarea {
  width: 300px;
  height: 90px;
  outline: 0;
  border: 1px solid blue;
  margin: 0 auto;
  resize: none!important;
  background: #fff;
  outline: 0;
  color: #292F33 !important;
  font-size: 20px !important;
  box-sizing: border-box;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="BgChanger">Change Textarea Bg</div>
<textarea class="main_textarea"></textarea>

https://jsfiddle.net/n651hL8k/10/

Answer 1

The problem is not the padding but the textarea's height property.

One hacky solution will be to chain .css({height: 'auto'}) to your onclick handler function.

$('textarea').on('input', autosize);

function autosize() {
  var $this = $(this);
  $this
    .css({
      height: 'auto'
    })
    .css({
      height: $this.prop('scrollHeight')
    });
}

$(".BgChanger").on("click", function() {

  $(".main_textarea")
  .addClass("BgA")
    .css({
      height: 'auto'
    });

});

.BgChanger {}

.BgA {
  width: auto;
  border: 1px solid red;
  background: green!important;
  text-align: center!important;
  font-size: 22px!important;
  color: white!important;
  font-weight: bold;
  padding: 50px 20px 40px 20px;
}

.main_textarea::-webkit-scrollbar {
  display: none;
}

.main_textarea {
  width: 300px;
  height: 90px;
  outline: 0;
  border: 1px solid blue;
  margin: 0 auto;
  resize: none!important;
  background: #fff;
  outline: 0;
  color: #292F33 !important;
  font-size: 20px !important;
  box-sizing: border-box;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="BgChanger">Change Textarea Bg</div>
<textarea class="main_textarea"></textarea>