如何在textarea外面設置按鈕，但是當textarea高度比按鈕增加時，必須使用textarea？

Question

我用兩個不同的div設置TextArea和Button。 div1有textarea，div2有按鈕。現在我想要做textarea高度增加按鈕必須與文本區域下來。

謝謝

Answer 1

這是你在找什麼？

$.each($('textarea'), function() { 
 
    var offset = this.offsetHeight - this.clientHeight; 
 

 
    var resizeTextarea = function(el) { 
 
    $(el).css('height', 'auto').css('height', el.scrollHeight + offset); 
 
    }; 
 
    $(this).on('keyup input', function() { 
 
    resizeTextarea(this); 
 
    }).removeAttr('data-autoresize'); 
 
}); 
 

 
$("textarea").on("keyup", function() { 
 
    var textareaHeight = $(this).height(); 
 
    var buttonHeight = $(".div2 button").height() 
 
    var move = parseInt(textareaHeight - buttonHeight) 
 
    $(".div2 button").css("margin-top", move); 
 
});

.div1 { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="div1"> 
 
    <textarea></textarea> 
 
</div> 
 
<div class="div2"> 
 
    <button>button</button> 
 
</div>

Answer 2

試試這個， 能做到這一點使用CSS，那麼爲什麼要使用JavaScript。

textarea { resize: vertical; } 
 
textarea{ 
 
    background: #fff; 
 
    min-height: 50px; 
 
}

<form method="post"> 
 
\t <textarea class="box" style="height: 50px;"></textarea><br> 
 
\t <button class="btn" type="submit" value="submit">Submit &nbsp &nbsp &nbsp </button> 
 
\t </form>