在 textarea 上触发按键事件不起作用 jquery fiddle

Question

1) 我有一个 textarea，我正在执行一个函数以在写入后自动调整大小....（效果很好）

2) 我有一个按钮，它会在单击它后更改文本区域的 class（添加背景颜色、填充等）

问题

点击按钮后，一切正常，但 padding-bottom 似乎是 0 当它应该显示新的 40px 填充底部时。这个填充只有在文本区域上写了一些内容后才会恢复....

我知道这是因为这个autosize function我添加到textarea

作为解决方案，我想在点击按钮后触发 .trigger("keypress");，但没有触发

我做错了什么？

$('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

问题不在于填充，而在于文本区域的高度属性。

一个 hacky 解决方案是将 .css({height: 'auto'}) 链接到您的 onclick 处理函数。

$('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>

在 textarea 上触发按键事件不起作用 jquery fiddle

triggering keypress event on textarea not working jquery fiddle

jquery

triggers

textarea