原生JS实现登录框邮箱提示

分享一个由原生JS实现的注册或登录时，输入邮箱时下拉提示效果，效果如下：

实现代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS实现登录框提示</title><style>* {margin: 0;padding: 0;}body {font: 12px/1.125 Arial, Helvetica, sans-serif;}li {list-style: none;}#login {width: 252px;height: 385px;/* 彩色背景图 */background: url(./images/1.jpg) no-repeat;margin: 20px auto;position: relative;}.detail {margin: 0 0 5px 30px;position: relative;top: 110px;}.detail input {color: #999999;border: 1px solid #74C8E5;border-radius: 3px 3px 3px 3px;height: 15px;line-height: 14px;padding: 8px 5px 7px;width: 184px;}#option {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;left: 30px;margin: 0;overflow: hidden;padding: 0;position: absolute;text-align: left;top: 142px;visibility: visible;width: 194px;z-index: 1;display: none;}.note,.item {clear: both;color: #999999;cursor: pointer;font-size: 12px;height: 20px;line-height: 20px;list-style: none outside none;margin: 0 1px;padding: 0 5px;white-space: nowrap;}.active {white-space: nowrap;clear: both;color: rgb(153, 153, 153);cursor: pointer;font-size: 12px;height: 20px;line-height: 20px;list-style: none outside none;margin: 0pt 1px;padding: 0pt 5px;background: none repeat scroll 0% 0% rgb(232, 244, 252);}</style></head><body><div id="login"><div class="detail"><input id="input" type="text" maxlength="128" placeholder="邮箱/会员帐号/手机号" name="username"autocomplete="off"></div><div class="detail"><input type="password" maxlength="24" placeholder="请输入密码" name="password"></div><ul id="option"><li class="note">请选择邮箱类型</li><li email="" class="item"></li><li email="@sina.com" class="item">@sina.com</li><li email="@163.com" class="item">@163.com</li><li email="@qq.com" class="item">@qq.com</li><li email="@126.com" class="item">@126.com</li><li email="@vip.sina.com" class="item">@vip.sina.com</li><li email="@sina.cn" class="item">@sina.cn</li><li email="@hotmail.com" class="item">@hotmail.com</li><li email="@gmail.com" class="item">@gmail.com</li><li email="@sohu.com" class="item">@sohu.com</li><li email="@yahoo.cn" class="item">@yahoo.cn</li><li email="@139.com" class="item">@139.com</li><li email="@wo.com.cn" class="item">@wo.com.cn</li><li email="@189.cn" class="item">@189.cn</li></ul></div><script>window.onload = function () {// 实列化var option = new Option();// 初始化option.init();};// 构造函数function Option() {// 获取用户输入框this.input = document.getElementById("input");// 获取下拉选项框this.optionBox = document.getElementById("option");// 获取下拉列表项this.optionItem = this.optionBox.getElementsByTagName("li");};// 为构造函数添加原型方法Option.prototype = {// 初始化init: function () {// 输入改变时this.onChange();// 光标移开时this.onBlur();},// 边续触发改变时onChange: function () {// 兼容各浏览器var ie = !-[1,];var that = this;if (ie) {that.input.onpropertychange = function(){// 防止在IE下输入值为空的时触发下拉提示框if (that.input.value == "") {that.tips();return;};// 显示下拉列表框that.optionBox.style.display = "block";// 显示提示that.tips();// 输入时的默认选中that.select(0);};} else {that.input.oninput = function(){// 显示下拉列表框that.optionBox.style.display = "block";// 显示提示that.tips();// 输入时的默认选中that.select(0);};}},// 光标移开时隐藏下拉提示框onBlur: function () {var that = this;that.input.onblur=function () {that.optionBox.style.display="none";};},// 输入时提示内空相应改变tips: function () {var value = this.input.value;// 定义邮箱正则var reg = new RegExp('@' + value.substring(value.indexOf('@') + 1) + '');// 初始化下拉列表for (var i = 1; i < this.optionItem.length; i++) {this.optionItem[i].style.display = "block";this.optionItem[i].flag = true;};if (reg.test(value)) {// 获取所有下拉选项自定义属性for (var i = 1; i < this.optionItem.length; i++) {var email = this.optionItem[i].getAttribute("email");// 为选中的第一个选项直接赋值if (i == 1) {// 将输入值赋给选项this.optionItem[i].innerHTML = value;} else {if (reg.test(email)) {this.optionItem[i].style.display = "block";this.optionItem[i].flag = true;} else {this.optionItem[i].style.display = "none";this.optionItem[i].flag = false;}}}} else {// 获取所有下拉选项自定义属性for (var i = 1; i < this.optionItem.length; i++){var email = this.optionItem[i].getAttribute("email");// 如果获取的值为空时if (!email) {// 将输入值赋给选项this.optionItem[i].innerHTML = value;} else {// 选项的内容为输入值加上其属性值this.optionItem[i].innerHTML = value + email;}}}},// 提示列表项选中方法select: function (index) {var that = this;var array = [];// 选中一个提示后，重新输入时，将选中项还原为默认样式for (var i = 1; i < this.optionItem.length; i++) {this.optionItem[i].className = "item";if(this.optionItem[i].flag) {array.push(this.optionItem[i]);};};// 当输入内容为空时if (this.input.value == "") {array[index].className = "item";// 当输入内容不为空时} else {array[index].className = "active";};// 为所有的下拉提示添加鼠标移入事件for (var i = 1; i < array.length; i++) {array[i].index = i;// 鼠标移入时array[i].onmouseover = function () {// 将所有选项的样式还原为默认样式for (var i = 1; i < that.optionItem.length; i++) {that.optionItem[i].className = "item";};// 为当前选项添加激活样式this.className = "active";index = this.index;};// 鼠标点击时，将当前的提示选项内容替换为输入值array.onmousedown = function () {that.input.value = this.innerHTML;};};// 添加键盘事件document.onkeydown = function (ev) {// 事件兼容var myEvent = ev || window.event;// 按键向上if (myEvent.keyCode == 38) {if (index == 0) {index = array.length - 1;} else {index--;};for (var i = 1; i < that.optionItem.length; i++) {that.optionItem[i].className = "item";};array[index].className = "active";// 按键向下    } else if (myEvent.keyCode == 40){// 当下标为最后一个还原为第一个if (index == array.length - 1) {index = 0;} else {index++;};// 清空所有下拉选项为默认样式for (var i = 1; i < that.optionItem.length; i++) {that.optionItem[i].className = "item";};// 为当前选项添加选中样式array[index].className = "active";// 按键回车} else if (myEvent.keyCode == 13) {// 将当前的提示选项内容替换为输入值that.input.value = array[index].innerHTML;// 将光标移开输入框，并关闭下拉列表项that.input.blur();};};}};</script>
</body></html>

原生JS实现登录框邮箱提示相关推荐

原生JS验证码登录界面
原生JS验证码登录界面效果图 html页面结构 css页面样式 JavaScript页面行为效果图 html页面结构页面的结构以input.label.canvas等标签组成 <!DOCT ...
原生js 弹出框;弹出效果定时关闭
关于原生js的弹出框样式淡出淡入效果; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
原生JS熊猫登录注册验证,获取本地存储loaclStroage的用户名
1,熊猫登录界面,通过大量原生CSS和原生JS代码,完成并实现了简单的用户交互,通过获取本地存储空间的用户名,来实现简单的登录效果, 2,判断了用户名输入框和本地存储空间的用户名是否有重复, 解决了注 ...
原生js + 后端nodejs实现邮箱信封表白程序
一个简单的信封表白程序由前端原生js + 后端nodejs(接收邮件) 程序体验地址:http://love.hzzy.xyz/ (手机访问效果更加) 前端介绍如果点击了跳动的爱心,会开始放烟花来 ...
原生js、css分别实现提示框渐渐消失的效果
效果展示: 方法一:(js) 思路:通过js修改dom的visibility.opacity的属性来实现效果. <div id="remind">{{ changeSt ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
js实现搜索框智能提示上下移动效果
Posted on 2011-06-08 23:09 杨锐-->天柱山阅读(597) 评论(3) 编辑收藏最近公司网站首页搜索框改进,需要在智能提示列表上加上支持键盘上下键移动的效果. 搞 ...
原生js实现搜索框点击搜索清空历史记录
实现思路 1.点击搜索框:注册点击事件 2.获取用户输入的值 3.将用户输入的值添加到本地存储:1)由于输入不止一个值且后期需要保存相关数据,故一定要存成数组或对象,所以要定义一个空数组2)由于值可能 ...
原生JS获取单选框或复选框的选中值的方法
菜鸟入门篇,请各位大大忽略. Step1:从dom上获取到需要的元素,例如有一组单选框的name="sex" var inputs=document.getElementsByNa ...
JS：原生JS实现message消息提示框
简介学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...

原生JS实现登录框邮箱提示

原生JS实现登录框邮箱提示相关推荐

最新文章

热门文章