当前位置:jQuery学习 > jQuery > 当文本框获得焦点时使输入区域变大

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

时间:2010-08-07QQ群:116983258

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

思路非常简单,就是当文本框获得焦点时,改变文本框的宽度或者高度。如果你看过我前边关于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学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-input-enlarge.html

所有话题