-1

私は次のHTMLを持っています:

    <textarea class="new" id="1"></textarea>
    <textarea class="new" id="2"></textarea>

このCSSだけでなく：

.new {
    height:60px;     
}

.new:focus {
    height:80px;
}

textarea がフォーカスを取得すると (ユーザーがクリックまたはタブで移動)、その高さを 100px に変更したいのですが、その値が空でない文字列である場合に限ります。どうすればこれを達成できますか？

更新::テキストエリアを Twitter のように機能させたい

読んでくれてありがとう

4

1 に答える 1

1

次のコードは、フォーカスされている場合はテキストエリアの高さを増やし、コンテンツが空でない場合はフォーカスを失ったときに増加した高さを維持します。

//html
<div class="container">
    <textarea class="new" id="1"></textarea>
    <textarea class="new" id="2"></textarea>
</div>

//css
.new {
    height:20px;     
}
.new:focus, .new.notEmpty {
    height:80px;
}


//javascript
$('.container').on('change', 'textarea.new', function(){
    var notEmpty = $(this).val().length > 0;
    $(this).toggleClass('notEmpty', notEmpty);
});

フィドル

の使用はお勧めしません。代わりにイベント委任.live()を使用してください。

$('.container').on('change', 'textarea.new', ... )委任の例です。対象とする自然なコンテナがない場合は、 を使用します$(document).on( ... )。

于 2013-09-10T15:09:47.630 に答える