JQuery ввод автоматического изменения размера

Question

У меня есть некоторые 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 )
        });
    });

Answer 1

Рабочая скрипка 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 )

});

Answer 2

Вам нужно будет делать размытие, только если поле пустое.

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

Answer 3

Проблема в событии blur. Нет условия не заменять контент, введенный пользователем.