javascript - jQuery:在更改行时使文本区域滑出？

Question

我有一个文本区域框，当用户输入如此多的字符以及单击按钮时，它会从 3 行扩展到 17 行。

设置新大小();函数是通过 onkeyup 调用的，当长度大于 50 时扩展文本区域。

更多空间();通过按钮调用函数。

发生这种情况时，我想将盒子滑出，有什么想法吗？

谢谢这是我的代码:

function SetNewSize(textarea){
if (textarea.value.length > 50)
{
    textarea.rows = 17;
}
else
{
    textarea.rows = 3;
}}

function morespace(){
var thetxt = document.getElementById('more').value;
var box = document.forms["myForm"]["comment"];
if(box.rows == 3)
{
    $("#emailme").fadeOut(800);
    box.rows = 17;
    document.getElementById('more').innerHTML = "less space?";
}
else
{
    $("#emailme").fadeIn(800);
    box.rows = 3;
    document.getElementById('more').innerHTML = "more space?";
}}

Answer 1

通过“滑出框”，我猜你的意思是让它动起来。虽然您可能无法在 jQuery 中为 textarea 行设置动画，但您可以为 textarea 的 height 设置动画，以便为用户提供更多空间。例如，您触发了这样的事情:

$('#comment').animate({'height': '+=40'},200);

这会在每次触发时增加 40 像素的高度，并且动画流畅。如果你想添加一个数字行，你可以简单地计算你想要文本区域变成多大，然后将它设置为那个高度。

这是一个 JSFiddle link对于此操作，您可能需要查看 jQuery animate API .