2

これは私のコードです:(シンプルにしてください）

<textarea style="height:100px;">
    $textareatext
</textarea>
  • 1行の場合$textareatext、textareaの高さを合わせたい
  • その3、5または10行の場合...同じこと。

私が抱えている問題は100px高さが大きすぎることですが、これを設定して20px10行ある場合、テキストエリアの高さが小さすぎます。注：値はmysqlを介してプリロードされます。だから私はそれが線を数えるべきだと思います、そしてそれから何本の線に基づいて高さを設定しますか？助言がありますか？

私はJavascriptとjQuery、またはあなたが提案するものなら何でも使用します。

ありがとうございました。

4

10 に答える 10

10

これらは役立つかもしれません。どちらもjQueryプラグインです。

編集

var $textArea = $("#textarea-container");

resizeTextArea($textArea);

$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

この回答は、以下のフランソワ・ヴァールによって提供されました。

于 2012-07-28T06:51:38.960 に答える
9

ハードコーディングされた高さを削除しtextarea、IDを指定します。

<textarea id="textarea-container">
    Line 1
    Line 2
    Line 3
    Line 4
</textarea>​

jQuery を使用すると、次を使用してページの読み込み時に自動サイズ変更し、keuUp前述のようにイベント時にサイズを変更できます。

var $textArea = $("#textarea-container");

// Re-size to fit initial content as it is pre-loaded.
resizeTextArea($textArea);

// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

デモを見る

または、それを表示してデフォルトの行パディングを削除することだけが重要な場合は、次を使用します。

var $textArea = $("#textarea-container");
var nativeRowPadding = 15;

// Re-size to fit initial content.
resizeTextArea($textArea);

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight-nativeRowPadding );
}​

デモを見る

于 2012-07-28T07:26:16.710 に答える
5

すべてのテキストエリアが内容に合わせて、入力時に高さが増減するようにするには、次を使用します。

$("textarea").on("input",function(){
   $(this).height("auto").height($(this)[0].scrollHeight);
}

このコード行をSO自体にインストールすると実際に役立ちます:)

于 2014-03-21T15:41:24.187 に答える
1

ちょっと、次の 5 行のコードだけで、プリロードされたテキストエリアの仕事ができました

window.onload= function(){

    var inputs, index;

    inputs = document.getElementsByTagName('textarea');

    for (index = 0; index < inputs.length; ++index) 
    {
    inputs[index].style.height=inputs[index].scrollHeight + 5
    }

}
于 2012-08-25T19:46:26.577 に答える
0 
<textarea id='myText'></textarea>

var obj=document.getElementById('myText');
obj.onkeyup=function(){
if(obj.scrollHeight>obj.offsetHeight)obj.style.height=obj.scrollHeight+'px';
}

ユーザーがテキストエリアに入力していると思います

于 2012-07-28T07:03:12.440 に答える