0

テキスト領域入力フィールドを持つ基本的な HTML フォームがあります。

<form action="process.php" method="post">
    <textarea class="text-input" rows="1" cols="20" name="describe_your_project">
        <input type="submit" value="submit" />
    </textarea>
</form>

ユーザーがこの入力フィールドのスペースの最後まで入力するときにこのフィールドに入力するとtextarea、デフォルトのスクロールバーが表示されずに、基本的にキャリッジリターンのような行をドロップダウンしたいと思います。

これは basecamp や他のプログラムで見たことがありますが、これが jQuery 関数なのか CSS3 値なのかはわかりません。どんな洞察も素晴らしいでしょう。

4

2 に答える 2

1

これを試して：

$('.text-input').bind('input keyup',growme);
function growme() {
    var $this=$(this);
    $this.data('lineheight',$this.data('lineheight')||$this.height());
    if (this.scrollHeight-1>$this.height()) $this.height($this.height()+$this.data('lineheight'));
}

デモ

またはより単純な

$('.text-input').bind('input keyup',growme);
function growme() {
    $(this).height(this.scrollHeight);
}
于 2013-01-31T02:36:43.970 に答える
0

上記の皆さんの投稿に感謝します。上記のオプションをいくつか試してみましたが、ブラウザーによって動作が異なりました (Chrome では上記のオプションで問題が発生していました)。私はもう少し調査を行い、これに出くわしました：

https://github.com/jevin/Autogrow-Textarea

将来誰かに役立つことを願っています...私を正しい方向に向けてくれてありがとう!

于 2013-01-31T18:24:05.833 に答える