Question

背景：我正在制作一个类似于Facebook墙的页面，它会有很多帖子，你应该可以评论每个帖子。您发布评论的这些文本框应该像Facebook一样调整大小。

到目前为止我有这个代码。它可以工作，但只在页面上的第一个文本框中，我希望它适用于每一个：）

是否有机会让它适用于每个文本框？

<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
    element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
    element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
    text.style.height = 'auto';
    text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
    window.setTimeout(resize, 0);
}
observe(text, 'change',  resize);
observe(text, 'cut',     delayedResize);
observe(text, 'paste',   delayedResize);
observe(text, 'drop',    delayedResize);
observe(text, 'keydown', delayedResize);

text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>

Answer 1

您能提供实时网页的示例代码吗？就目前而言，您在此处显示的javascript仅适用于使用文本ID标识的单个元素;因此，无论你有多少textareas，受影响的唯一元素将是页面上具有该ID的元素之一 - 当然，你应该只有一个元素。

按照现在的方式处理代码，您需要从document.getElementById更改为类似document.getElementsByTagName('textarea')的内容，然后循环显示结果。请尝试以下方法：

function init () {
var textareas = document.getElementsByTagName('textarea');
...
var textareasLength = textareas.length;
for (var i = 0; i < textareasLength; i++) {
    observe(textareas[i], 'change',  resize);
    observe(textareas[i], 'cut',     delayedResize);
    observe(textareas[i], 'paste',   delayedResize);
    observe(textareas[i], 'drop',    delayedResize);
    observe(textareas[i], 'keydown', delayedResize);
}    
}

修改

在审核时，除其他外，你的resize（）函数只能处理前一行中定义的text变量。如果没有完全重构代码，获得所需功能的一种方法如下：

function init () { var textareas = document.getElementsByTagName('textarea'); function resize() { if( arguments.length>0 ) { self=arguments[0]; } else self=this; self.style.height = 'auto'; self.style.height = self.scrollHeight+'px'; } /* 0-timeout to get the already changed text */ function delayedResize() { var self=this; window.setTimeout(resize(self), 0); } var textareasLength = textareas.length; for (var i = 0; i < textareasLength; i++) { observe(textareas[i], 'change', resize); observe(textareas[i], 'cut', delayedResize); observe(textareas[i], 'paste', delayedResize); observe(textareas[i], 'drop', delayedResize); observe(textareas[i], 'keydown', delayedResize); } }

这不是最佳选择，但应该有效。

Answer 2

它仅适用于一个文本框，因为您只选择一个document.getElementById('text')。请记住，id属性必须是唯一的。

你可以这样做：

texts = document.querySelectorAll('.text');
texts.forEach(function (text) {
    ... your current code for text ...
});

.text表示您选择class="text"的所有元素。

多个文本框的自动文本框高度

2 个答案: