http://jsfiddle.net/Calum/5dqwJ/
CSS:
textarea {
height: 20px;
margin: 20px;
width: 585px;
resize: none;
overflow: hidden;
vertical-align: top;
transition: height 3s;
-webkit-transition: height 3s;
-moz-transition: height 3s;
-o-transition: height 3s;
}
使用Javascript:
$(document).ready(function () {
$("textarea").focus(function (event) {
if ($(this).val().length === 0) {
$(this).height(100);
$(this).css('resize', 'vertical');
$(this).attr('placeholder', null);
}
});
$("textarea").blur(function (event) {
if ($(this).val().length === 0) {
$(this).height(20);
$(this).attr('placeholder', "Enter comment");
$(this).css('resize', 'none');
}
});
});
HTML:
<textarea placeholder='Enter comment'></textarea>
在Chrome,IE和Opera中,当您专注于textarea时,它会扩展并收缩CSS3过渡。
当我对FireFox执行相同操作时,它不会为任何内容制作动画。
任何想法为什么?
谢谢!
答案 0 :(得分:3)
请参阅此页面了解转换
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
你可以通过css完全完成,不需要使用js
删除 $(this).height(20); 和 $(this).height(100); 来自JS并将此添加到css
textarea:focus{
height: 100px;
}
答案 1 :(得分:2)
好吧, - &gt; http://jsfiddle.net/FSEqT/
textarea:focus {
height: 300px;
margin: 20px;
width: 585px;
resize: none;
overflow: hidden;
vertical-align: top;
}
textarea {
height: 200px;
margin: 20px;
width: 585px;
transition: height 3s;
-webkit-transition: height 3s;
-moz-transition: height 3s;
-o-transition: height 3s;
}
答案 2 :(得分:2)
如果在textarea上添加required
属性,则可以使用:invalid
伪类来定位空文本区:
textarea {
height: 100px;
margin: 20px;
width: 585px;
resize: vertical;
overflow: hidden;
vertical-align: top;
-webkit-transition: height .3s;
-moz-transition: height .3s;
-o-transition: height .3s;
transition: height .3s;
}
textarea:invalid{ /* single line*/
height: 20px;
resize: none;
}
textarea:focus{
height: 100px;
resize: vertical;
}
(如果您不希望周围有红色边框,请添加box-shadow: none;
)
答案 3 :(得分:1)
您的代码中没有css转换。但如果你想要它,下面的东西应该有用。只需将其添加到textarea {...}
下方。
textarea:hover {
height: 100px;
}