jQuery整理笔记七----几个经典表单应用

1、文本框获得(失去)焦点

当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验。




效果图:

jQuery整理笔记七----几个经典表单应用

2、Elastic弹性文本域

Elastic是一款功能专一的表单插件,他能够控制页面内表单域(<textarea>)标签高度自己主动伸缩。以适应包括的文本。应用这个插件的时候页面须要引入jquery.elastic.source.js。

插件下载地址:点击进入下载页面


望长城内外。惟余莽莽;大河上下,顿失滔滔。

山舞银蛇,原驱蜡象,欲与天公试比高。

须晴日,看红装素裹,分外妖娆。

江山如此多娇。引无数英雄竞折腰。 惜秦皇汉武,略输文採;唐宗宋祖,稍逊风骚。 一代天骄。成吉思汗,仅仅识弯弓射大雕。 俱往矣。数风流人物,还看今朝。

</textarea> </body> </html>


效果图:

jQuery整理笔记七----几个经典表单应用

我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自己主动添加。当然了,随着内容的降低也能够高度降低的。

3、Autotab自己主动Tab文本框

Autotab也是一款功能专一的表单插件,它提供了自己主动跳格的功能,当用户输入的字符数一旦超过已定义的最大长度,则会依据事先设置的目标自己主动跳转到对应元素上。省却了

用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了,我们做的web项目中也有非常多地方能够用到这插件。对于提高用户体验还是非常有帮助的。

使用时须要引入jquery.autotab.js,下载地址:点击进入下载页面



除了能够限定输入长度外,还能够通过autotab_filter()方法限定输入的字符类型,这种方法还能过滤大写、小写、空格、字母等。详细的用到了现查吧。


假设将上面的js改成:

$(function(){
	$('#autotab').submit(function(){
		return false;
	});
	$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
就是仅仅能输入数字了。

4、passwordStrength密码强度指标

passwordStrength插件可以依据用户输入的password,以图形化方式显示password的强度。


上例用到一个图片:

jQuery整理笔记七----几个经典表单应用

运行效果图:

jQuery整理笔记七----几个经典表单应用

5、formToWizard表单填充向导

这个是什么意思呢?事实上我们实际见的也非常多,有非常多站点填写注冊信息的时候是分步进行的,例如说,先填写个人信息,然后再填写工作信息...然后一起提交。这就避免了庞

大的信息量都在一个页面上进行填写。

formToWizard就是解决问题的一个小插件,插件下载地址:点击进入下载页面



效果图:

jQuery整理笔记七----几个经典表单应用jQuery整理笔记七----几个经典表单应用

jQuery整理笔记七----几个经典表单应用

6、checkbox复选框(全选反选等操作)

曾经经经常使用。不说了。

7、下拉框的应用

这回先看个图:

jQuery整理笔记七----几个经典表单应用

大家肯定都见过类似效果的网页,怎么实现的呢,代码非常easy:



代码实现的功能:

1)、将选中的选项加入给对方

2)、将所有选项加入给对方

3)、双击某个选项将其加入给对方