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. 已知TSP问题的最好解

    a280 : 2579ali535 : 202339att48 : 10628att532 : 27686bayg29 : 1610bays29 : 2020berlin52 : 7542bier12 ...

  2. 在virtualenv中安装libxml2和libxslt

    在使用python的工作中,需要使用到libxml2和libxslt库.原来在实际环境中已经安装完成了,但是在virtualenv中还没有,现在正在整理virtualenv的环境.下面把在virtua ...

  3. javaweb jsp页面上传excel文件

    servlet: private static final long FILE_MAX_SIZE = 4 * 1024 * 1024; if (!ServletFileUpload.isMultipa ...

  4. Can't create/write to file '/tmp/#sql_3105_0.MYI' (Errcode: 13)

    最近的项目中由于临时存储空间太大了.索性把tmp目录删除了.结果访问出现 Can't create/write to file '/tmp/#sql_3105_0.MYI' (Errcode: 13) ...

  5. C指针数组

    #include<stdio.h> #include<stdlib.h> int main(void) { char const *str[] = { "this i ...

  6. [ArcGIS Engine]栅格数据处理 RasterDataset RasterLayer Raster RasterBandCollection

    原文 http://www.cnblogs.com/zoe-j/archive/2012/03/22/2412403.html 1.由RasterLayer 得到RasterDataset IRast ...

  7. linux date

    我使用过的Linux命令之date - 显示.修改系统日期时间 本文链接:http://codingstandards.iteye.com/blog/1157513   (转载请注明出处) 用途说明 ...

  8. Android Animations 视图动画使用详解！！！

    转自:http://www.open-open.com/lib/view/open1335777066015.html Android Animations 视图动画使用详解 一.动画类型 Andro ...

  9. Rotate Array 解答

    Question Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, t ...

  10. Course Schedule II 解答

    Question There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may ...