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

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

javascript forms

Javascript 多个文本框的自动文本框高度,javascript,forms,textbox,resize,height,Javascript,Forms,Textbox,Resize,Height,背景：我正在制作一个类似facebook墙的页面，它将有许多帖子，你应该能够评论每一篇帖子。这些文本框，你在其中发布你的评论，应该像在Facebook中一样调整大小到目前为止，我有这个代码。它可以工作，但只在页面上的第一个文本框中，我希望它可以在每个文本框中工作：有没有机会让它在每个文本框中都工作 <script type="text/javascript"> var observe; if (window.attachEvent) { observe = function (

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

你能提供一个实时页面的示例代码吗？目前，您在这里展示的javascript只适用于使用文本ID标识的单个元素；因此，无论您有多少个TextArea，唯一受影响的元素将是页面上具有该ID的元素之一——当然，您应该只有一个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);
}    
}

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

这不是最理想的，但它应该可以工作。

它只能在一个文本框上工作，因为您使用document.getElementById'text只选择了一个文本框。记住id属性必须是唯一的

你可以这样做：

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

其中.text表示选择class=text的所有元素。

只有一个表单，但它们只是循环使用。每个表单都有相同的ID。只有父帖子ID的隐藏ID不同。你的粘贴栏只显示一个表单和一个文本区域。有没有什么方法可以显示包含多个HTML的HTML，以便我们在上下文中了解它？当然，如果您有耐心，我会将其上载到我的服务器：只需给我2分钟。注释文本区域位于wallcomment-divs内