jQuery输入自动调整大小

JB.*_*JB. 1 jquery resize input jquery-animate

我有一些jQuery,可以在单击时平稳地调整文本输入的大小。一切正常,除了单击字段以外的小问题时,该字段将重置。

令人讨厌的部分是,当您在该字段中键入内容,然后在该字段之外单击时,将删除您输入的所有数据。

我如何才能不清除用户单击时输入的文本?

继承人的jsfiddle

这是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 )
        });
    });
Run Code Online (Sandbox Code Playgroud)

amo*_*era 5

可用的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 )

});
Run Code Online (Sandbox Code Playgroud)