点击更改textarea高度

我已经定义了一个textarea高度并且按钮被设置为不显示任何东西。我想改变textarea高度（到一个固定的高度），并显示按钮，如果我点击textaea内。点击更改textarea高度

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中看到相同的代码。感谢您的任何帮助。

来源

2011-10-07 user966585

只需绑定到click事件textarea的：

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

这里是一个updated fiddle。您可能希望使这些选择器更加具体，以便不适用于页面上的每个textarea和button元素。

来源

2011-10-07 10:51:17

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

来源

2011-10-07 10:54:54 realshadow

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

     });

来源

2011-10-07 10:55:42

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

来源

2011-10-07 11:00:57 sandeep

点击更改textarea高度

回答

相关问题