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>才能使用我的自动调整功能。

请大家建议我你有任何指示。

你的建议会对我有所帮助。

由于

-Pravin

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

Answer 2

我发现的最佳解决方案就是这个，

    function textAreaAdjust(o) 
    {
        o.style.height = "1px";
        o.style.height = (25+o.scrollHeight)+"px";
    }

然后在输入标签中使文本区域自动对焦并调用javascript onfocus，花了我很多时间考虑使用自动对焦，没有它这只会在单击textarea时起作用。

<textarea autofocus="true" onfocus="textAreaAdjust(this);"></textarea>

Answer 3

我会在2/3秒后触发这些功能，以便在加载页面后触发该功能：

setTimeout('yourFunctionThatResizesEverything()', 2)

或者您可以在页面的最上端添加一个脚本标记（但这对w3c合规性没有好处），之前将加载所有内容，并且您的textarea将调整大小：

<script>
/*call your magical function*/
yourFunctionThatResizesEverything()
</script>

Answer 4

不应该for循环

for(var i = 0 ; i < setOfElement.length ; i++) { 
            resizeTextarea(setOfElement[i].id); 
          }

请参阅 for (var i=0 ，而不是 for(var i=1
数组从0开始？我不是很擅长JQuery，但这是我的第一个想法...

如何在<textarea> </textarea>的onload上触发事件

4 个答案: