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を持つページ上の要素の1つだけになります。もちろん、そのうちの1つだけが必要です。

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、直前の行で定義された変数に対してのみ機能していました。コードを完全にリファクタリングせずに、必要な機能を取得する1つの方法は次のとおりです。

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

を使用して選択しているテキストボックスは1つだけなので、1つのテキストボックスでのみ機能します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 に答える