jquery输入自动调整大小

发布于 2024-10-29 19:45:29 字数 799 浏览 1 评论 0原文

我有一些 jquery 可以在单击时平滑地调整文本输入的大小。一切正常，除了一个小问题，当您单击远离该字段时，该字段会重置。

烦人的部分是，当您在字段中输入内容，然后单击远离字段时，您输入的所有数据都会被删除。

如何让它不清除用户单击时输入的文本？

，

这是 jquery：

    var inputWdith = '250px';
    var inputWdithReturn = '140px';     
    $(document).ready(function() {
        $('input').focus(function(){

            $(this).val(function() {
                $(this).val(''); 
            });

            $(this).animate({
                width: inputWdith
            }, 400 )
        }); 

        $('input').blur(function(){
            $(this).val('Enter info...');
            $(this).animate({
                width: inputWdithReturn
            }, 500 )
        });
    });

原文

I have some jquery that smoothly resizes a text input on click. It all works well except a small issue when you click away from the field, the field resets.

The annoying part is when you type into the field, then click away from the field, all data you input is removed.

How do I get it to NOT clear the text that was input when the user clicks away?

Heres a jsfiddle

and

Here is the jquery:

    var inputWdith = '250px';
    var inputWdithReturn = '140px';     
    $(document).ready(function() {
        $('input').focus(function(){

            $(this).val(function() {
                $(this).val(''); 
            });

            $(this).animate({
                width: inputWdith
            }, 400 )
        }); 

        $('input').blur(function(){
            $(this).val('Enter info...');
            $(this).animate({
                width: inputWdithReturn
            }, 500 )
        });
    });

分享到QQ

分享到微博

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

发布评论

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

自由范儿 2024-11-05 19:45:30

工作js小提琴： http://jsfiddle.net/NcwZA/1/

$('input').focus(function(){
    if($(this).val()=='Enter info...'){
        $(this).val('');
    }

    //animate the box
    $(this).animate({
        width: inputWdith
    }, 400 )
}); 

$('input').blur(function(){
    if($(this).val()==''){
        $(this).val('Enter info...');
    }

    $(this).animate({
        width: inputWdithReturn
    }, 500 )

});

Working js fiddle: http://jsfiddle.net/NcwZA/1/

$('input').focus(function(){
    if($(this).val()=='Enter info...'){
        $(this).val('');
    }

    //animate the box
    $(this).animate({
        width: inputWdith
    }, 400 )
}); 

$('input').blur(function(){
    if($(this).val()==''){
        $(this).val('Enter info...');
    }

    $(this).animate({
        width: inputWdithReturn
    }, 500 )

});

回复收藏 0 原文

空城缀染半城烟沙 2024-11-05 19:45:30

如果该字段为空，您只需要进行模糊处理。

$('input').blur(function(){
    if ($(this).is(":empty")){
        $(this).val("Enter info...")
            .animate({
                width: inputWdithReturn
            }, 500 );
    }
});

You'll only need to do the blur stuff if the field is blank.

$('input').blur(function(){
    if ($(this).is(":empty")){
        $(this).val("Enter info...")
            .animate({
                width: inputWdithReturn
            }, 500 );
    }
});

回复收藏 0 原文