html5邮箱提示信息,JS实现的邮箱提示补全效果示例
本文实例讲述了JS实现的邮箱提示补全效果。分享给大家供大家参考,具体如下:
现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表
实现提示的原理是采用正则进行匹配
效果图如下:
代码如下:
邮箱补全提示
ul{padding:0px;margin:0px;}
.login_autoComplete{width:256px;border:1px solid #4190db;position:absolute;background-color:#ffffff;z-index:99;top:109px;left:40px;display:none}
.login_auto_ul em{font-style:normal}
.login_auto_ul li.login_auto_title{font-weight:normal;line-height:30px;}
.login_auto_ul li{line-height:22px;text-indent:5px;font-family:"Arial";cursor:pointer;font-weight:bold;color:#333}
.login_auto_ul li.hover,.login_auto_ul li.curr{color:#ffffff;background-color:#6eb6fe}
window.email_auto = function(selector){
var elt = $(selector);
var strHtml = '
'
- '+
'
请选择邮箱后缀'+
'
'+
'
'+
'
'+
'
'+
'
'+
'
'+
'
'+
'
';
var lc = "#login_autoComplete";
var autoComplete,autoLi;
if($(lc).length==0){
$("body").append(strHtml);
$(lc).data("elt",elt);
autoComplete = $("#login_autoComplete");
autoLi = autoComplete.find("li:not(.login_auto_title)");
autoLi.mouseover(function(){
$(this).siblings().filter(".hover").removeClass("hover");
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass("hover");
}).mousedown(function(){
$(lc).data("elt").val($(this).text()).change();
$(this).parent().parent().hide();
});
}else{
$(lc).data("elt",elt);
autoComplete = $("#login_autoComplete");
autoLi = autoComplete.find("li:not(.login_auto_title)");
}
$(lc).css("width",elt.outerWidth()-1);
//用户名补全+翻动
elt.keyup(function(e){
if(/13|38|40|116/.test(e.keyCode) || this.value==''){
return false;
}
var username = this.value;
if(username.indexOf("@")==-1){
autoComplete.hide();
return false;
}
autoLi.each(function(){
this.innerHTML = username.replace(/\@+.*/,"")+$(this).attr("hz");
if(this.innerHTML.indexOf(username)>=0){
$(this).show();
}else{
$(this).hide();
}
}).filter(".hover").removeClass("hover");
autoComplete.show().css({
left : $(this).offset().left,
top : $(this).offset().top + $(this).outerHeight(true) - 1
});
if(autoLi.filter(":visible").length==0){
autoComplete.hide();
}else{
autoLi.filter(":visible").eq(0).addClass("hover");
}
}).change(function(){
$("#login_autoComplete").hide();
}).keydown(function(e){
if(e.keyCode==38){ //上
autoLi.filter(".hover").prev().not(".login_auto_title").addClass("hover").next().removeClass("hover");
}else if(e.keyCode==40){ //下
autoLi.filter(".hover").next().addClass("hover").prev().removeClass("hover");
}else if(e.keyCode==13){ //Enter
autoLi.filter(".hover").mousedown();
}
}).focus(function(){
$("#login_autoComplete").data("elt",$(this));
});
}
$(function(){
email_auto("#xxx");
});
脚本之家测试:邮箱补全提示
PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:
希望本文所述对大家JavaScript程序设计有所帮助。
html5邮箱提示信息,JS实现的邮箱提示补全效果示例相关推荐
- JS实现邮箱提示补全效果
现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表 实现提示的原理是采用正则进行匹配 效果图如下: 代码如下: <!doctype ...
- Atom JS 代码智能提示补全
JS 代码智能提示补全 题外话 官方正式版虽然内置了.autocomplete-plus:最为明显的一个功能就是记忆你已经输入过的名称进行匹配: 但是针对于某些语言来说,还是有些不足的-.其中 JS ...
- 纯js实现搜索框自动补全
纯js实现搜索框自动补全 开发语言:HTML+CSS+JS 编辑器:VSCode 构建思路:建立两个div,一个用于输入和搜索,一个用于展示,用于展示的初始状态为隐藏的.后面当有键盘输入事件时就显示, ...
- 基层教学组织评估系统5_系统管理员数据维护模块功能完善,优化教学组织名称的输入提示补全,项目打包部署篇
目录 一.完善 二.项目打包 三.部署 四.报错解决 五.数据初始 一.完善 系统管理员数据维护模块功能完善 优化教学组织名称的输入提示补全 数据对应格式bug修复 1.系统管理员数据维护模块功能完善 ...
- vscode配置c++代码提示补全
vscode配置c++代码提示补全 在网上找了大半天,说的方式都试过了,都没有适合我的,还是自己找stackoverflow靠谱点 {"editor.rulers": [80 // ...
- AndroidStudio 文档自动提示代码提示补全
从eclipse转到AS下,发现很多功能"没了",其实是设置的问题, 例如我习惯于在鼠标移动到某个类.方法.字段上面时自动出现说明文档,是因为在AS下默认没有开启 可以手动显示,快 ...
- springboot集成elasticsearch,实现搜索提示补全功能
springboot集成elasticsearch,通过实体类创建索引,实现搜索提示补全功能 文章目录 springboot集成elasticsearch,通过实体类创建索引,实现搜索提示补全功能 一 ...
- Android Studio在xml文件中编写代码时,关键词没有代码提示补全
问题描述: Android Studio在xml文件中编写代码时,无法自动补全 例如在TextView中输入textSize,没有出现任何代码提示 解决方式: File->Project Str ...
- python sublime 提示补全_【原创】Sublime+Verilator建立强大的verilog编写环境
前言(没必要看) --子曰:工欲善其事,必先利其器. 写个水文不容易,转载请注明,谢谢了... 在写这篇水文之前,我一直在用UE(UtralEdite)编写Verilog代码,使用习惯了之后,感觉很方 ...
最新文章
- Iaas、Caas、Paas、Faas!选择正确的平台!
- C# 【无法修改XX返回值,因为它不是变量】
- java导出pdf字体宋体不加粗_docx4j word转pdf 中文宋体(中文正文)类型转换乱码...
- Boost.Python Tutorial
- 微信年终奖人均280万?腾讯张军:不可能 醒一醒吧!
- 关于bash中if语法结构的广泛误解(转)
- hdu 2255+hdu 3395
- 苹果电脑获取Android Studio的发布版SHA1和开发版SHA1
- 元组 与 字典
- ZigBee-CC2530单片机 - 1路硬件PWM控制舵机角度(精度为1us)
- 傻,是不值得同情和原谅的事情
- dB、dBm、dBw的含义和转化关系
- 硬件模块应用之超声波测距模块SRF05应用
- VS2017无法打开graphics.h解决方法
- oracle一体机的管理界面,Oracle 数据库一体机:zData Light - 分布式存储管理平台
- AngularJS 概述
- 测试、发布、小组合作及经验启示
- HDU - 4082 Hou Yi‘s secret (计算几何)
- 转载:android开源项目汇总
- Spring-boot中使用nutz实践
热门文章
- 用Beep函数演绎天空之城
- 比原链Bystack上线!1000万BTM怎么“拿”?
- request的基本用法
- 知到网课毒品与艾滋病预防考试试题(含答案)
- Kafka Raft
- 系统集成项目管理工程师 42 个过程图形记忆法(第2期)
- 管家基因 | Human housekeeping genes
- cosarctanx的求法
- 应用计算机教学方法的文献,【计算机教学论文】计算机教学对任务驱动教学法的应用(共3354字)...
- pytorch里面的Optimizer和optimizer.step()用法