1

ユーザーがボタンをクリックするだけでなく、非常に多くの文字を入力すると、3 行から 17 行に拡大するテキスト領域ボックスがあります。

SetNewSize(); 関数は onkeyup 経由で呼び出され、長さが 50 を超えるとテキスト領域を拡張します。

より多くのスペース（）; 関数はボタンを介して呼び出されます。

これが発生したときにボックスをスライドさせたいのですが、何かアイデアはありますか?

ありがとう、ここに私のコードがあります:

function SetNewSize(textarea){
if (textarea.value.length > 50)
{
    textarea.rows = 17;
}
else
{
    textarea.rows = 3;
}}

function morespace(){
var thetxt = document.getElementById('more').value;
var box = document.forms["myForm"]["comment"];
if(box.rows == 3)
{
    $("#emailme").fadeOut(800);
    box.rows = 17;
    document.getElementById('more').innerHTML = "less space?";
}
else
{
    $("#emailme").fadeIn(800);
    box.rows = 3;
    document.getElementById('more').innerHTML = "more space?";
}}
4

3 に答える 3

3

「ボックスをスライドさせる」とは、アニメーション化することを意味していると思います。jQuery ではテキストエリアの行をアニメーション化できない場合がありますが、テキストエリアの行をアニメーション化heightして、ユーザーにより多くのスペースを与えることができます。たとえば、次のようなものをトリガーします。

$('#comment').animate({'height': '+=40'},200);

これにより、トリガーされるたびに 40 ピクセルの高さが追加され、スムーズにアニメーション化されます。数行を追加したい場合は、テキストエリアの大きさを計算し、その高さにアニメーション化するだけです。

このアクションのJSFiddle リンクは次のとおりです。jQuery animate APIを確認してください。

于 2012-11-01T01:33:03.927 に答える
0

簡単な答えは、誰かが既に作成したものを使用することです: https://github.com/gurglet/jQuery-Textare-Autoresize-Plugin

ただし、独自のロールを作成したい場合は、必要なコードですぐに返信を更新します.

更新された回答: この HTML があると仮定します:

<button id="emailme">Email me</button>
<form id="myForm">
    <input id="more" name="more" type="text">
    <textarea id="comment" name="comment" rows="3">

    </textarea>
</form>

次に、次のスクリプトを使用できます。

(function(){
    var BIG = 17,
        SMALL = 3,
        currentSize = SMALL,
        changeSize = function(rows) {
            var $more = $("#more"),
                thetxt = $more.val(),
                $box = $("#comment"),
                currentRows = $box.prop("rows"),
                boxRowHeight = $box.height()/currentRows,
                newHeight = rows * boxRowHeight;

            if (rows === currentRows) return;       

            return $box.animate({'height': newHeight }, 500 , "swing", function(){
                $more.val((currentRows > rows) ? "more space?" : "less space?");
                $box.prop("rows", rows);
                currentSize = rows;
            }).promise();
        },
        setNewSize = function(event) {
            var $area = $(event.target);
            if ($area.val().length > 50 && currentSize === SMALL) {
                changeSize(BIG);
                currentSize = BIG ;
            } 
        };



    $("#comment").bind("keyup", setNewSize);

    $("#more").click(function(){
        if (currentSize === BIG) {
            $.when(changeSize(SMALL)).then(function(){
                $("#emailme").fadeIn(800);
            });
        }else{
            $.when(changeSize(BIG)).then(function(){
                $("#emailme").fadeOut(800);
            });            
        }

    });            
}​)();​

JSFiddle リンク: http://jsfiddle.net/isochronous/fvtY7/

于 2012-11-01T01:30:09.170 に答える
-1

jquery の attr() を次のように使用することもできます。

$('#comment').attr('rows', 17);

行は変更する属性を表し、17 は設定する値を表します。現在使用されている行数を取得するには、次を使用します。

   var rows = $('#comment').attr('rows');
于 2012-11-01T01:36:56.527 に答える