javascript 如何在 <textarea> 加载时触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3863451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to trigger an event on onload of <textarea>
提问by pravin
In my application there are few <textarea>presents and applied pagination to all these <textarea>. On a page one <textarea>is displayed.
在我的应用程序中，很少有<textarea>礼物和应用分页到所有这些<textarea>。在一页<textarea>上显示一个。
Assume there are 10 <textarea>exist, then there will be exist 10 pages, one <textarea>on each page.
假设有 10 个<textarea>存在，那么将存在 10 页，<textarea>每页一个。
I have applied auto fit feature to these <textarea>, written below function for this :
我已经对这些应用了自动拟合<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;
}
}
I have called this function on some events in <textarea>element defination i.e. :
我在<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>
Auto fit feature works properly once user triggers above mentioned events, i.e. onchange,onkeyup,onkeydown.
一旦用户触发上述事件，即 onchange、onkeyup、onkeydown，自动适应功能就会正常工作。
I stuck to one main problem that, auto fit feature wont work once page get's load.
我坚持一个主要问题，即一旦页面加载完毕，自动调整功能将无法工作。
for this I have also added below code on document.ready i.e.
为此，我还在 document.ready 上添加了以下代码，即
$(document).ready(function() {
if($('.autoGrow')) {
var setOfElement = $('.autoGrow');
for(var i = 1 ; i <= setOfElement.length ; i++) {
resizeTextarea(setOfElement[i].id);
}
}
});
Still facing same problem that, user explicitly needs to click or jumps to <textarea>to work my auto fit feature.
仍然面临同样的问题，用户明确需要单击或跳转<textarea>才能使用我的自动适应功能。
Please folks suggest me any pointers you have.
请人们向我建议您有任何指示。
Your sugggestion will helps me lot.
你的建议会对我有很大帮助。
Thanks
谢谢
-Pravin
-普拉文
回答by Nick Craver
You could (with most of your current code so the calculations are the same) re-write it as a plugin, like this:
您可以（使用当前的大部分代码，因此计算相同）将其重写为插件，如下所示：
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
};
Then in your document.readyhandler, just call that on the elements you want, for example:
然后在您的document.ready处理程序中，只需在您想要的元素上调用它，例如：
$(function() {
$('.autoGrow').resizeTextarea();
//or, as it's written you can pass a different minimum height, for example:
//$('.autoGrow').resizeTextarea(45);
});
回答by Crouch
Best solution ive found is this,
我发现的最佳解决方案是这个，
function textAreaAdjust(o)
{
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
Then in the input tag make the text area auto focus and call the javascript onfocus, took me ages to think of using autofocus, without it this will only work when the textarea is clicked on.
然后在输入标签中使文本区域自动聚焦并调用 javascript onfocus，我花了很长时间才想到使用自动聚焦，没有它这只会在单击文本区域时起作用。
<textarea autofocus="true" onfocus="textAreaAdjust(this);"></textarea>
回答by Cedric
I'd trigger the functions after 2/3 seconds, so that the function get triggered after the page is loaded :
我会在 2/3 秒后触发这些功能，以便在页面加载后触发该功能：
setTimeout('yourFunctionThatResizesEverything()', 2)
Or you can add a script tag at the uppermost end of your page (but that's no good for w3c compliance), everything will be loaded before, and your textarea will be resized :
或者您可以在页面的最上端添加一个脚本标记（但这对 w3c 合规性不利），所有内容都将在之前加载，并且您的 textarea 将调整大小：
<script>
/*call your magical function*/
yourFunctionThatResizesEverything()
</script>
回答by Nivas
shouldn't the forloop be
for循环不应该是
for(var i = 0 ; i < setOfElement.length ; i++) {
resizeTextarea(setOfElement[i].id);
}
see for (var i=0instead of for(var i=1
Arrays start at 0 right? I am not very good at JQuery, but this is my first thought...
看到for (var i=0而不是
数组从 0 开始，对吗？我不太擅长 JQuery，但这是我的第一个想法......for(var i=1
