使用 jQuery 根据文本区域内的文本设置文本区域的高度

发布于 2024-09-11 04:17:45 字数 646 浏览 4 评论 0原文

我的表单中有一个 </code> 元素，其中附加了以下代码：

$('#links').focusin(function() {
    $('#links').animate({
        height: '100px'
    }, 300, function() {
        // done
    });
});

这非常有效，当文本区域获得焦点时，它的高度会很好地增加到 100px。现在，我希望它在失去焦点时根据其中的文本缩小到合适的大小。我是这样写的：

$('#links').focusout(function() {
    $('#links').animate({
        height: 'auto'
    }, 300, function() {
        // done
    });
});

但是它不起作用，它只是保持在相同的高度（100px）。有什么办法可以做到这一点吗？

谢谢。 :)

编辑：为了避免一些混乱， $('#links').focusout 的偶数处理程序工作正常，这是我测试的第一件事。所以我认为这是动画或 CSS 属性的问题。

原文

I have a <textarea> element in my form that has this code attached to it:

$('#links').focusin(function() {
    $('#links').animate({
        height: '100px'
    }, 300, function() {
        // done
    });
});

This works perfectly, when the text area gets focus it increases in height nicely to 100px. Now, I want it to shrink back down to a suitable size based on the text inside it when it loses focus. I wrote this:

$('#links').focusout(function() {
    $('#links').animate({
        height: 'auto'
    }, 300, function() {
        // done
    });
});

But it doesn't work, it just stays at the same height (100px). Is there any way to do this?

Thanks. :)

Edit: To save some confusion, the even handler for $('#links').focusout works fine, that's the first thing I tested. So I assume it's a problem with the animation or the CSS property.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼睛会笑 2024-09-18 04:17:45

尝试使用 $( '#links' ).blur( function(){ ... } ) 代替

http://api.jquery.com/blur/

编辑您的实际代码：

$('#links').blur(function() {
$('#links').animate({
    height: 'auto'
}, 300, function() {
    // done
});
});

其他一些注释..您可以使用 $( '#links' ).focus() 代替 focusin，也可以，一旦进入该函数，您可以使用 $( this ).animate() 作为快捷方式。只是一些小技巧之类的。

Try $( '#links' ).blur( function(){ ... } ) instead

http://api.jquery.com/blur/

Edit, your actual code:

$('#links').blur(function() {
$('#links').animate({
    height: 'auto'
}, 300, function() {
    // done
});
});

Some other notes.. You can use $( '#links' ).focus() instead of focusin, and also, once you're in the function, you can use $( this ).animate(), as a shortcut. Just little tips and whatnot.

回复收藏 0 原文

秋叶绚丽 2024-09-18 04:17:45

这与您正在做的不太一样，但非常相似： http ://james.padolsey.com/javascript/jquery-plugin-autoresize/

回复收藏 0 原文

难理解 2024-09-18 04:17:45

auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
    $(this).animate({
        height: '100px'
    }, 300, function() {
        // done
    });
}).focusout(function() {
    $(this).animate({
        height: auto_height_link
    }, 300, function() {
        // done
    });
});

但无论如何，动画不会读取高度的 css 值 auto

我偶然发现了这个 http://www.unwrongest .com/projects/elastic/ 我猜这就是你需要的

auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
    $(this).animate({
        height: '100px'
    }, 300, function() {
        // done
    });
}).focusout(function() {
    $(this).animate({
        height: auto_height_link
    }, 300, function() {
        // done
    });
});

but anyways the animate doesnt read the css value auto for height

i stumbled upon this http://www.unwrongest.com/projects/elastic/ which is what you need i guess

回复收藏 0 原文