0

背景：我正在制作一个类似于 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>
4

2 回答 2

0

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

接近现在的代码，您需要将结果更改document.getElementById为document.getElementsByTagName('textarea')then 循环。尝试以下操作：

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);
}    
}

这不是最佳的，但它应该工作。

于 2012-11-15T17:41:45.457 回答
0

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

你可以这样做：

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

其中 .text 表示您正在选择所有带有class="text".

于 2012-11-15T17:43:03.123 回答