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. (转)eclipse 代码自动补全

    转自:http://blog.csdn.net/yushuwai2010/article/details/11856129 一般默认情况下,Eclipse的代码提示功能是比MicrosoftVisua ...

  2. asp.net js 获取服务器控件值

    最近在弄js 但是设计到获取服务器控件的值,有点模糊.百度查了资料都达不到效果.现在看看这个,希望朋友们能用上!! <asp:Label ID="lbDepartName" ...

  3. java直接打开pdf,doc,xls

    jsp页面: <a href=\'#\' onclick=onLine(\''+urls[i]+'\') >在线打开</a> html页面超链接单击打开online函数 var ...

  4. Python Challenge 过关心得（1）

    正式开始第1关,这一关的URL的特殊部分是map. 这关的图片上有一个本子,上面写着K→M,O→Q,E→G,稍微思索就能发现这几个字母都是按照字母表的顺序向后移动了两位,那么最投机取巧的方法就是把ma ...

  5. 当浏览器输入url的时候发生了什么

    当用户在浏览器地址栏里面输入一个url的时候.接下来会发生一系列的过程.首先是DNS解析, 将域名转换成对应的IP地址,之后浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接.该 ...

  6. 挑战以Dropbox为代表的传统“同步网盘”，Seafile推出“分布式文件同步技术”打造的私有云服务

    挑战以Dropbox为代表的传统“同步网盘”,Seafile推出“分布式文件同步技术”打造的私有云服务#36氪开放日# 其他 JasonZheng • 2012-04-07 15:14 来自36氪开放 ...

  7. B-树、B+树、B*树的区别

      原文地址:  http://blog.csdn.net/dazhong159/article/details/7963846/ B-树.B+树.B*树的区别 2012-09-11 22:41 97 ...

  8. scheme递归

    主要参考: http://www.shido.info/lisp/scheme7_e.html Function fact that calculates factorials. (define (f ...

  9. Pros and Cons of T4 in Visual Studio 2008

    Oleg Sych - » Pros and Cons of T4 in Visual Studio 2008 Pros and Cons of T4 in Visual Studio 2008 Po ...

  10. 网易云课堂_C++开发入门到精通_章节8:设计模式

    课时44设计模式简介 设计模式简介 面向对象设计的第一个原则:针对接口编程,而不是针对实现编程 接口->指针 实现->实例 若已存在一个类Class A,现在希望复用Class A,则有以 ...