javascript - 如何在 <textarea> 加载时触发事件

Question

在我的应用程序中很少有 <textarea>对所有这些进行呈现和应用分页 <textarea> 。在第一页<textarea>被展示。

假设有 10 <textarea>存在的话，就会存在10个页面，其中一个<textarea>在每个页面上。

我已将自动调整功能应用于这些 <textarea> ，为此编写了下面的函数:

function resizeTextarea(id) {

    var minHeight = "75px"; 
    textareaObj = document.getElementById(id);

    var scrollH = textareaObj.scrollHeight+'px';
    if((textareaObj.style.height != scrollH) && (textareaObj.scrollHeight!=0)){
       textareaObj.style.height = scrollH;
    } else
    {
       textareaObj.style.height = minHeight;
    }
}

我在<textarea>中的一些事件上调用了这个函数元素定义即:

<textarea class="autoGrow" onkeyup="resizeTextarea(this.id);" onchange="resizeTextarea(this.id);" onkeydown="resizeTextarea(this.id);" onmouseup="resizeTextarea(this.id);" onfocus="resizeTextarea(this.id);" style="width:78%;height:75px;overflow:hidden" onclick="resizeTextarea(this.id);" rows="6" cols ="80" id="input"><?php echo decodeChars($textdata) ;?></textarea>

一旦用户触发上述事件，即 onchange、onkeyup、onkeydown，自动调整功能就会正常工作。

我坚持一个主要问题，一旦页面加载，自动调整功能将无法工作。

为此，我还在 document.ready 上添加了以下代码，即

$(document).ready(function() {
       if($('.autoGrow')) {
         var setOfElement = $('.autoGrow');
         for(var i = 1 ; i <= setOfElement.length ; i++) {
            resizeTextarea(setOfElement[i].id);
          }
    } 
});

仍然面临同样的问题，用户明确需要单击或跳转到 <textarea>来使用我的自动调整功能。

请大家向我提出任何建议。

您的建议对我很有帮助。

谢谢

-普拉文

Answer 1

您可以(使用大多数当前代码，因此计算是相同的)将其重写为插件，如下所示:

jQuery.fn.resizeTextarea = function(min) {
  min = min || 75; 
  return this.bind("keyup change click focus", function() {
    var sh = this.scrollHeight;
    $(this).height(function(i, h) {
       return h <= sh && sh != 0 ? sh : min;
    });    
  }).trigger("keyup"); //run it once immediately
};

然后在您的 document.ready 处理程序中，只需在您想要的元素上调用它，例如:

$(function() {
  $('.autoGrow').resizeTextarea();
  //or, as it's written you can pass a different minimum height, for example:
  //$('.autoGrow').resizeTextarea(45);  
});

You can test it out here .