Question

目前我有以下代码用于自动调整我的textarea：

$('textarea').bind('input propertychange', function() {
    $(this).height(50).height(Math.min(370, this.scrollHeight));
});

当我在textarea中时，这可以正常工作，并通过按某些键来更改文本。

我需要的是在使用JavaScript设置区域文本时以及当textarea没有聚焦时也可以这样做。只在回调中执行相同的代码（当然有正确的范围）不起作用 - 高度变为零。

Answer 1

您可以尝试触发事件

$('textarea').on('input propertychange', function() {
    $(this).height(50).height(Math.min(370, this.scrollHeight));
});
$('textarea').trigger('propertychange');

//如果您使用html（）更改textarea内容或追加，您可以尝试类似的东西 $（＆＃39; textarea的＆＃39;）HTML（somecontent写入）; $（＆＃39; textarea的＆＃39）。高度（$（＆＃39; textarea的＆＃39;。）scrollHeight属性）;

Answer 2

执行回调函数后，触发propertychange函数

$('textarea').trigger('propertychange');

Answer 3

使用change和trigger

＆＃13;

$("#i").on('change', function(){
  this.style.color = 'red';
  });
function f(){
  $('#i').trigger('change');
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i" value="hello" /><br>
<button onclick="f()">Run</button>

＆＃13;

Answer 4

我的jquery解决方案是：

$(document).ready(function(){
    $("textarea").each(function(){
        $(this).height(($(this)[0].scrollHeight) + "px");
    });
    $("textarea").keypress(function(){
        $(this).height(($(this)[0].scrollHeight) + "px");
    });
})

JSFiddle

自动调整textarea无焦点

4 个答案: