1

ここで使用しているエラスティック プラグインは、使用している jQuery です。

 <script type="text/javascript">
    jQuery(function(){
    jQuery('textarea').elastic();
    });
 </script>

コードで使用している5つのテキストエリアがあります。したがって、ユーザーが textarea1 にいるときに、Enter キーを 10 回押してテキストエリアを展開するとします。彼が 2 番目の textarea をクリックするか、textarea1 の外側をクリックすると、textarea1 が元のサイズに戻る方法はありますか?

また、これの反対も達成できますか？textarea1 に 3 行ある場合。テキスト領域をクリックすると、サイズを 5 行に増やすことができますか?

4

1 に答える 1

0

!importantエラスティックのイベントをバインド解除/再バインドするエレガントな方法はおそらくありますが、属性を使用してテキストエリアの高さの CSS をオーバーライドすることで、力ずくですばやくオーバーライドできます。

属性を持つテキストエリアを作成しrowsます (テキストエリアを元に戻すサイズがわかります):

<textarea rows="4"></textarea>

フォーカス/ぼかし機能をテキストエリアにアタッチして、高さをオーバーライド/リセットします。

jQuery(function() {
    $('textarea').focus(function() {
        // remove any height overrides
        $(this).css('height', '');
        // make it elastic
        $('textarea').elastic();
    });
    $('textarea').blur(function() {
       // override the height on the textarea to force it back to its original height
       $(this).css('height', $(this).attr("rows") + 'em !important'); 
    });
});
于 2011-07-26T18:25:16.890 に答える