首页 > 代码库 > jQuery整理笔记七----几个经典表单应用

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

2024-07-02 16:19:07   225人阅读

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
	font:normal 12px/17px Arial;
}
div{
    padding:2px;
} 
input, textarea { 
	 width: 12em; 
	 border: 1px solid #888;
}
.focus { 
	 border: 1px solid #f00;
	 background: #fcc;
} 
</style>
<!--   引入jQuery -->
<script src=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>

效果图：


2、Elastic弹性文本域

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  src=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>

效果图：


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

3、Autotab自动Tab文本框

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  src=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>

除了可以限定输入长度外，还可以通过autotab_filter()方法限定输入的字符类型，这个方法还能过滤大写、小写、空格、字母等，具体的用到了现查吧。

如果将上面的js改成：

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

4、passwordStrength密码强度指标

passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>passwordStrength</title>
<link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" media="all" />>
上例用到一个图片：

执行效果图：

5、formToWizard表单填充向导

这个是什么意思呢？其实我们实际见的也很多，有很多网站填写注册信息的时候是分步进行的，比方说，先填写个人信息，然后再填写工作信息...然后一起提交。这就避免了庞

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
	  <title> New Document </title>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <script  src=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>

效果图：

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

以前经常用，不说了。

7、下拉框的应用

这回先看个图：

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span { 
	display:block; 
	margin:2px 2px;
	padding:4px 10px; 
	background:#898989;
	cursor:pointer;
	font-size:12px;
	color:white;
}
</style>
<!--   引入jQuery -->
<script src=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>

代码实现的功能：

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

2)、将全部选项添加给对方

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


联系
我们