點擊更改textarea高度

Question

我已經定義了一個textarea高度並且按鈕被設置爲不顯示任何東西。我想改變textarea高度（到一個固定的高度），並顯示按鈕，如果我點擊textaea內。

HTML：

<div class="wrap"> 
    <textarea class="ta"></textarea> 
    <div class="clear"></div> 
    <button>OK</button> 
</div> 

CSS：

textarea{ 
    height:15px; 
    width: 200px; 
} 

.clear{ 
    clear:both; 
} 

button{ 
    display:none; 
} 

正如你可以看到，textarea的具有高度15px的。所以，只要我點擊它，我想改變高度爲100px，也想顯示按鈕。

您可以在jsfiddle here中看到相同的代碼。感謝您的任何幫助。

Answer 1

只需綁定到click事件textarea的：

$("textarea").click(function() { 
    $(this).height(100); 
    $("button").show(); 
}); 

這裏是一個updated fiddle。您可能希望使這些選擇器更加具體，以便不適用於頁面上的每個textarea和button元素。

Answer 2

這是更新的jsfiddle。它將在焦點上改變其高度並在模糊時返回原始大小。作爲替代方案，您可以使用addClass和removeClass而不是使用.css()。

Answer 3

$('.ta').click(function() {  
     $(this).css("height","+=85"); 
     $("button").show(); 

     }); 

Answer 4

@ user966585;看看這個例子與pure css：

textarea{height: 15px; width: 200px;} 
textarea:focus{height:100px;} 
textarea:focus ~ button{display:block} 
.clear{clear:both;} 
button{display:none;} 

http://jsfiddle.net/sandeep/fZHMF/15/