当文本框获得焦点时使输入区域变大

很多人认为表单应该占据最小的空间，先不管这个观点是不是正确，今天我们就实现当用户进行输入时，即本文框获得焦点时，将文本框的大小进行改变。这样，用户就能看到自己前边输入的东西了。

思路非常简单，就是当文本框获得焦点时，改变文本框的宽度或者高度。如果你看过我前边关于jQuery对元素属性操作的总结，相信几分钟就可实现本篇中的功能。

<input type="text" id="txtUser" style="width:200px; " />

假设网页中有上边这样的本文框，当用户要进行输入时，我们改变它的宽度为500。

jQuery("#txtUser").focus(function() { 
    jQuery(this).width("500px"); 
}).blur(function() { 
    jQuery(this).width("200px"); 
});

可以看出代码非常简单，获得焦点时，宽度改变为500px。焦点离开时，恢复原来的宽度。如果为了一些效果，可用jQuery动画。在这里，我们将宽度在1秒钟改变为500px，代码如下：

jQuery("#txtUser").focus(function() { 
    $(this).animate({ width: "500px" }, 1000); 
}).blur(function() { 
    $(this).animate({ width: "200px" }, 1000); 
});

本篇就到这里，这种效果我想用过人人网的用户都已经见过了，这种方法同时提高了用户体验。

作者：朋友的你来源：jQuery学习