1.HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input添加邮箱的时候自动显示后缀</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#loginName").changeTips({
divTip:".on_changes"
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;}

.login{width:400px; margin:0 auto; background:#EBEBEB; position:relative;}

input{ width:230px; height:28px; margin:10px 0; line-height:28px;}

.login .on_changes{width:230px; position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid #000; display:none;}

.login .on_changes li{margin:8px;padding:4px;}

.login .on_changes li.active{ background:#CEE7FF;}

</style>
</head>
<body>
<div class="login">
<div class="ln"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div>
<ul class="on_changes">
<li email=""></li>
<li email="@sina.com"></li>
<li email="@163.com"></li>
<li email="@qq.com"></li>
<li email="@hotmail.com"></li>
<li email="@126.com"></li>
<li email="@gmail.com"></li>
<li email="@yahoo.com"></li>
</ul>
</div>
</body>
</html>

2.jquery 代码

<script type="text/javascript">
(function($){
$.fn.extend({
"changeTips":function(value){
value = $.extend({
divTip:""
},value)

var $this = $(this);
var indexLi = 0;

//点击document隐藏下拉层
$(document).click(function(event){
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
var liVal = $(event.target).text();
$this.val(liVal);
blus();
}else{
blus();
}
})

//隐藏下拉层
function blus(){
$(value.divTip).hide();
}

//键盘上下执行的函数
function keychang(up){
if(up == "up"){
if(indexLi == 1){
indexLi = $(value.divTip).children().length-1;
}else{
indexLi--;
}
}else{
if(indexLi == $(value.divTip).children().length-1){
indexLi = 1;
}else{
indexLi++;
}
}
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();
}

//值发生改变时
function valChange(){
var tex = $this.val();//输入框的值
var fronts = "";//存放含有“@”之前的字符串
var af = /@/;
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。

//让提示层显示，并对里面的LI遍历
if($this.val()==""){
blus();
}else{
$(value.divTip).
show().
children().
each(function(index) {
var valAttr = $(this).attr("email");
if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
//索引值大于1的LI元素进处处理
if(index>1){
//当输入的值有“@”的时候
if(af.test(tex)){
//如果含有“@”就截取输入框这个符号之前的字符串
fronts = tex.substring(tex.indexOf("@"),0);
$(this).text(fronts+valAttr);
//判断输入的值“@”之后的值，是否含有和LI的email属性
if(regMail.test($(this).attr("email"))){
$(this).show();
}else{
if(index>1){
$(this).hide();
}
}

}
//当输入的值没有“@”的时候
else{
$(this).text(tex+valAttr);
}
}
})
}
}

//输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
if($.browser){
$(this).bind("propertychange",function(){
valChange();
})
}else{
$(this).bind("input",function(){
valChange();
})
}

//鼠标点击和悬停LI
$(value.divTip).children().
hover(function(){
indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值;
if($(this).index()!=0){
$(this).addClass("active").siblings().removeClass();
}
})

//按键盘的上下移动LI的背景色
$this.keydown(function(event){
if(event.which == 38){//向上
keychang("up")
}else if(event.which == 40){//向下
keychang()
}else if(event.which == 13){ //回车
var liVal = $(value.divTip).children().eq(indexLi).text();
$this.val(liVal);
blus();
}
})
}
})
})(jQuery)
</script>

3.记得引入Jquery 库。。

input添加邮箱的时候自动显示后缀的更多相关文章

  1. 应用emailAutoComplete.js来自动显示邮箱后缀列表

    我们经常有邮箱的人都特别清楚,在输入我们的邮箱时,会自动显示出邮箱后缀列表,这个用户体验是不错的. 操作据悉——当我们输入文字时,会自动有个邮箱后缀名的列表.      而我这边的代码是,应用jque ...

  2. jquery仿邮箱文本输入框自动加载邮箱后缀

    在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错,使用起来很方便,几乎不用写神呢代码.&quo ...

  3. outlook添加邮箱账户时，测试成功，下一步显示请求失败

    今天在给公司同事添加邮箱账户时,全部设置正常,测试也成功了,但是点击下一步时,出现了请求失败的提示.     1.  看到这个提示,我首先重启了一下outlook,发现进去添加还是不行  2.重启了电 ...

  4. 如何给wordpress首页自动显示文章内容的第一个图片

    敏捷个人手机应用中使用到的数据来源于wordpress中,因为自己写的页面,所以可以自己写代码获取文章内容的第一个图片作为文章缩略图来显示,这样用户看到首页时图文并茂,感觉会好一些. 现在后台简单的使 ...

  5. winedt设置自动显示行号[latex]

    options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...

  6. android小知识之邮箱地址输入自动完成

    虽然不难,但是容易忘记,做个备忘吧 package com.guet.zhuge; import android.app.Activity; import android.os.Bundle; imp ...

  7. Android Studio添加原生库并自动构建

    [时间:2017-09] [状态:Open] [关键词:Android,Android Studio,gradle,native,c,c++,cmake,原生开发,ndk-build] 0 引言 最近 ...

  8. Extmail 批量添加邮箱用户

    Extmail  设置批量添加邮箱用户 需要修改  userctl.pl  文件 修改 userctl.pl 文件 cd /var/www/extsuite/extman/tools 编辑 userc ...

  9. 打开Activity时，不自动显示(弹出)虚拟键盘

    打开Activity时,不自动显示(弹出)虚拟键盘 在AndroidManifest.xml文件中<activity>标签中添加属性 android:windowSoftInputMode ...

随机推荐

  1. hdu1175连连看

    Problem Description “连连看”相信很多人都玩过.没玩过也没关系,下面我给大家介绍一下游戏规则:在一个棋盘中,放了很多的棋子.如果某两个相同的棋子,可以通过一条线连起来(这条线不能经 ...

  2. MFC让控件随窗口大小而改变

    转载自http://blog.csdn.net/chw1989/article/details/7488711 大小和位置都改变(亲测可行) 1.首先为窗体类添加CRect m_rect,该成员变量用 ...

  3. Object-c学习之路十（NSNumber&NSValue）

    // // main.m // NSNumberAndNSValue // // Created by WildCat on 13-7-26. // Copyright (c) 2013年 wildc ...

  4. [Head First Python]2. BIF(内置函数)

    1- range() >>> for each in range(2): print(each) ... 0 1

  5. 利用Azure Automation实现云端自动化运维(1)

    Azure Automation是Azure上的一个自动化工作流引擎,基于Powershell,来帮助用户简化,集成和自动化Azure上的运维工作,例如: 实现定时开关虚拟机,节约成本 实现定时创建删 ...

  6. VS2010下WPF开发ARCGIS ENGINE 10的带Ribbon控件项目

    原文 http://blog.sina.com.cn/s/blog_47522f7f0100nq5t.html 题目好长,但是集目前最新的工具于一身..VS是最新的2010版,不过用的是.net3.5 ...

  7. 经典递归算法研究：hanoi塔的理解与实现

    关于hanoi塔的原理以及概念,请Google,访问不了去百度. 主要设计到C中程序设计中递归的实现: 主代码实现如下: void hanoi(int src, int dest, int tmp, ...

  8. Windows多线程同步系列之四-----信号量

    信号量说实话自己没怎么使用过.书上大概这样说,信号量设置一个资源访问计数.当该计数值大于0的时候,该信号量对象 为有信号状态,当该计数值等于0的时候,该信号量对象为无信号状态. 我们来查几个主要的AP ...

  9. 【CF 675D Tree Construction】BST

    题目链接:http://codeforces.com/problemset/problem/675/D 题意:给一个由n个互异整数组成的序列a[],模拟BST的插入过程,依次输出每插入一个元素a[i] ...

  10. Unity屏幕射线碰撞

    Layers层: 从Layers设置看来,最多支持32层.  图层的值开始依次 0^2,1^2, 2^2, 3^3 依次增加. 当摄像机Culling Mask属性 Nothing= –1 Eveni ...