您的位置：首页 > 其它

表单中邮箱自动完成的实现

2016-04-01 06:41 316 查看

做好自己的网页是首要的，就是一个表单

我的表单如下

<!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><title>

财富88-提交申请

</title>

<meta name="keywords" content="股票" />

<meta name="keywords" content="新三板" />

<meta name="keywords" content="深圳股王" />

<meta name="keywords" content="股狼" />

<meta name="description" content="股票分析，新三板股权交易，股票分享，视频直播" />

<LINK href="tijiao/biaodan.css" rel="stylesheet">

<LINK href="tijiao/jquery.autocomplete.css" rel="stylesheet">

<STYLE type="text/css">

.register-width{

width:990px;

margin:0 auto;

}

</STYLE>

<STYLE>

body {font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53" !important;}

</STYLE>

<script src="tijiao/jquery-1.7.1.min.js"></script>

<script src="tijiao/jquery.validate.js"></script>

<script src="tijiao/jquery.autocomplete.js"></script>

<script src="tijiao/biaodan.js"></script>

</head>

<body>

<div class="register-width" style="height:200px" >

<h1 class="mingan" style="padding-top:100px">申请，马上就可以与大师<span style="color:blue">亲切交流</span></h1>

<h3>获得成就他身价过亿的20年炒股经验</h3>

</div>

<DIV class="register-width" id="reg-iframe">

<form id="InfoForm" method="post" action="insert.asp">

<div class="form-item">

<span class="form-label form-label-b">申请信息</span>

<span class="sub-title">个人信息</span>

</div>

<div class="form-item">

<span class="form-label"><span class="star">*</span>姓</span>

<input class="form-text err-input" id="J_Nick_1" name="xing" value="" title="请输入你的姓" placeholder="请输入你的姓"

type="text"/>

</div>

<div class="form-item">

<span class="form-label"><span class="star"> </span>名</span>

<input class="form-text err-input" id="J_Nick_2" name="ming" value="" title="请输入你的名" placeholder="请输入你的名"

type="text"/>

</div>

<div class="form-item">

<span class="form-label tsl" ><span class="star">*</span>电话</span>

<input class="form-text err-input" id="Tel" placeholder="请输入你的电话" title="请输入你的电话" name="tel" value=""

type="text"/>

</div>

<div class="form-item">

<span class="form-label tsl" ><span class="star">*</span>邮箱</span>

<input class="form-text" id="Email" placeholder="请输入你的邮箱" title="请输入你的邮箱" name="email" value="" type="text"/>

<ul class="ac_results">



</ul>

</div>

<div class="form-item ">

<button type="submit" class="btn btn-large tsl" data-phase-id="r_p_next" id="J_BtnInfoForm">确认</button>

</div>

</form>

</DIV>

<div><a href="http://www.miitbeian.gov.cn">粤ICP备16013499</div>

</body>

表单要完成，需要加载一定的css

对于css

我想说

margin padding 一个是外边距，一个是内边距

display none

和visible false 都表示隐藏，但是后者占位置，前者就不占位置

设定好css之后，自动完成列表就能显示了

表单的css

body {

background-image: url('bcg.png');

font-family: 'Helvetica', 'Arial', sans-serif;

text-align: center;

color: #ffffff;

}

#reg-iframe{

width:400px;

height:440px;

}

#reg-iframe .form-item{

margin:15px;

padding:0px;

}

#reg-iframe .sub-title{

color: #7f7f7f;

font-size: 9pt;

line-height: 37px;

}

#reg-iframe .form-label{

padding-top:8px;

display: inline;

float: left;

margin-left:-260px;

width: 240px;

text-align: right;

color: #7f7f7f;

}

#reg-iframe .form-label-b{

padding-top:3px;

font-weight: 700;

color: #000;

font-size: 18px;

}

#reg-iframe .star{

color: red;

vertical-align: middle;

margin-right: 4px;

color:red;

}

#reg-iframe .form-text{

border-radius:4px;

border:1px solid #ccc;

background:#fff;

height: 33px;

line-height: 33px;

width: 260px;

outline: 0;

color: #000;

font-size: 16px;

-webkit-transition: all .3s;

-moz-transition: all .3s;

-ms-transition: all .3s;

}

.btn{

display: inline-block;

zoom: 1;

*display: inline;

height: 36px;

line-height: 36px;

padding: 0 20px;

color: #FFF;

font-weight: 700;

font-size: 16px;

text-align: center;

background: #ff4001;

border: 0;

border-radius: 3px;

cursor: pointer;

}

.btn-large{

display: inline-block;

min-width: 260px;

height: 36px;

padding: 0 30px 1px;

background: #008fb2;

line-height: 33px;

font-size: 14px;

color: #fff;

text-align: center;

outline: 0;

}

然后是要显示的列表的css代码

.ac_results {

padding: 0px;

border: 2px solid WindowFrame;

background-color: #fff;

display:none;

overflow: hidden;

width: 260px;

margin-left:50px;

margin-top:0px;

}

.ac_results ul {

width: 100%;

padding: 1;

margin: 0;

}

.ac_results iframe {

position:absolute;

top:0;

left:0;

}

.ac_results li {

height:20px;

margin-left: -43px;

padding-left: 50px;

cursor: pointer;

font: menu;

font-size: 15px;

color:#000;

display: block;

width: 100%;

overflow: hidden;

text-align:left;

}

.ac_results li:hover{

background-color: #00f;

color: HighlightText;

}

.ac_loading {

background : Window url('./indicator.gif') right center no-repeat;

}

.ac_over {

background-color: #00f;

color: HighlightText;

}

最后是

js代码

js主要是获取邮箱的值，每次keyup读取一次，也触发事件

做一次自动完成列表的绘制

$(function(){

var mailList = new Array('@qq.com','@163.com','@sina.com','@hotmail.com');

$("#Email").bind("keyup",function(){

var val = $(this).val();

if(val == '' || val.indexOf("@")>-1){

$(".ac_results").hide();

return false;

}

$('.ac_results').empty();

for(var i = 0;i<mailList.length;i++){

var emailText = $(this).val();

$('.ac_results').append('<li class=addr>'+emailText+mailList[i]+'</li>');

}

$('.ac_results').show();

$('.ac_results li').click(function(){

$('#Email').val($(this).text());

$('.ac_results').hide();

})

})

})

运行结果如下图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航