单击时更改textarea高度

Question

我已经定义了textarea高度，按钮设置为none。我想更改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

@ 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/

Answer 2

只需绑定click的{​​{1}}事件：

textarea

这是一个updated fiddle。您可能希望使这些选择器更具体，以便不应用于页面上的每个$("textarea").click(function() { $(this).height(100); $("button").show(); }); 和textarea元素。

Answer 3

以下是更新后的jsfiddle。它会在焦点上改变其高度，并在模糊时返回原始大小。作为替代方案，您可以使用.css()和addClass，而不是removeClass。

Answer 4

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

        });