0

誰かが編集できるように、データベース クエリからのテキストが入力されたフォームにテキストエリアがあります。

スクロールせずにテキストエリアにコンテンツ全体を表示したいのですが、テキストが少ない場合は大きなテキストエリアを配置したくありません。

テキストは 5 ～ 300 文字です。

このタイプの問題の解決策を見てきましたが、以下に示すように、キーアップ時にテキストエリアが成長する場合のみです。

<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
4

4 に答える 4

0

上記のコードに少し変更を加えるだけで、textareaが自動サイズになります。以下の手順を実行するだけです

1）テキスト領域にIDを追加します

<textarea onkeyup="textAreaAdjust(this)" id="txt" runat="server" style="overflow:hidden"></textarea>

2）bodeタグを閉じる前に、JavaScriptコードを追加してtestAreaAdjustブロックを呼び出します

<script type="text/javascript">
textAreaAdjust(document.getElementById('txt'));
</script>

これにより、テキストボックスのサイズが自動化されます。これがお役に立てば幸いです

于 2012-05-11T12:25:03.523 に答える
0

textarea のコンテンツを、同じ幅で、サイズに影響するスタイル (font-size、line-height、padding など) で、非表示の div にコピーします。上記のdivの高さを測定し、テキストエリアを同じ高さに設定します。

于 2012-05-11T12:10:38.917 に答える
0

まず、使用しないでくださいonkeyup。テキスト入力の検出には適していません。

次のコードを使用してテキストエリアのサイズを変更しtextarea、コンテンツに合わせて要素のサイズを常に変更します。

var tarea = document.getElementsByTagName("textarea")[0];

tarea.oninput = function () {
    tarea.style.height = tarea.scrollHeight + "px";
}
​

ただし、古いバージョンの IE ではサポートされていないため、IE 8 以前で動作させる必要がある場合はoninput追加する必要があります。onpropertychange

var tarea = document.getElementsByTagName("textarea")[0];

tarea.oninput = tarea.onpropertychange = function (evt) {
    evt = evt || window.evt;
    if (evt.type == "propertychange" && evt.propertyName != "value")
        return;

    tarea.style.height = tarea.scrollHeight + "px";
}

実際のデモ: http://jsfiddle.net/D5e8t/

于 2012-05-11T12:12:19.287 に答える
0

ページの読み込み時にメソッドを呼び出すことができます。

于 2012-05-11T12:00:50.900 に答える