jquery输入自动调整大小

时间:2011-04-03 07:10:51

标签: jquery input resize 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 )
        });
    });

3 个答案:

答案 0 :(得分:4)

工作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 )

});

答案 1 :(得分:2)

如果字段为空,则只需要进行模糊处理。

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

答案 2 :(得分:0)

问题出在blur事件中。没有条件不替换用户输入的内容。