jQuery邮箱自动补全代码

你的名字 2022-04-24 04:42 322阅读 0赞

# [jQuery邮箱自动补全代码][jQuery] #

JScript 代码    复制

![None.gif][]

(function($){
        $.fn.emailMatch= function(settings){
            var defaultSettings = {
                emailTip:"请输入邮箱地址",
                aEmail: ["163.com", "qq.com", "gmail.com", "126.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com", "sina.com"], //邮件数组
                wrapLayer:"body",
                className:"mailListBox",
                emailRemember:true,
                autoCursor:false,
                position:"bottom" // bottom, left , right
            };
    /* 合并默认参数和用户自定义参数 */
            settings = settings ? $.extend(defaultSettings,settings):defaultSettings;
            return this.each(function(){
                var elem = $(this),t=0,l=0,
                w = elem.outerWidth(), 
                h = elem.outerHeight(),
                selectVal = sMail = inputVal = "",arrayNum = 0,
                isIndex = -1;
                t = elem.position().top;
                l = elem.position().left;
                var mailWrap = document.createElement("div");
                $(mailWrap).attr({"id":elem.attr("id"),"class":settings.className}) $(settings.wrapLayer).append(mailWrap); if($.trim(elem.val()) == ""){elem.val(settings.emailTip);}; elem.focus(function(){ arrayNum = 0; if($.trim(elem.val()) == settings.emailTip){elem.val('');}; // 清空 输入框 提示内容 if($.trim(elem.val()) !=""){ inputVal = $.trim(elem.val()); isIndex = inputVal.indexOf("@"); if(isIndex >= 0 ){ sMail = inputVal.substr(isIndex + 1); inputVal = inputVal.substring(0,isIndex); if(sMail !=""){ arrayNum = parseInt(!position(settings.aEmail,sMail)?0:position(settings.aEmail,sMail)); } } if(settings.autoCursor){ elem.val(inputVal); if($.browser.msie ){ setCaretAtEnd(elem.attr("id")); } } showList($(mailWrap),w,h,t,l); createMailList(mailWrap,inputVal,sMail,settings.aEmail,arrayNum); }; }).blur(function(){ if(elem.val() == ''){ elem.val(settings.emailTip); hideList($(mailWrap)); return false; }; // 还原 输入框 提示内容 enterVal(mailWrap,elem); hideList($(mailWrap)); }); elem.keyup(function(e){ var suffixArray = [], eKey = e && (e.which || e.keyCode); //console.log(eKey); switch(eKey){ case 9: // tab 按键 return; break; case 13: { // 回车 enterVal(mailWrap,elem); hideList($(mailWrap)); }break; case 38:{ // 方向键 上 showList($(mailWrap),w,h,t,l); cursorMove(mailWrap,-1); }break; case 40: {// 方向键 下 showList($(mailWrap),w,h,t,l); cursorMove(mailWrap,+1); }break; default:{ inputVal = $.trim(elem.val()); var keyIndex = inputVal.indexOf("@"); var suffix = "",suffixState = true; if(keyIndex >= 0){ suffix = inputVal.substr(keyIndex + 1); inputVal = inputVal.substring(0,keyIndex); $("#t2").text("BBB" + inputVal); if(suffix != '' && settings.emailRemember){ // 过滤数组 for (var i = 0; i < settings.aEmail.length; i++) { if (settings.aEmail[i].indexOf(suffix) == 0) { suffixArray.push(settings.aEmail[i]); suffixState = false; } } } if(suffix != '' && !settings.emailRemember){ // 当前高亮 选项 for (var i = 0; i < settings.aEmail.length; i++) { if (settings.aEmail[i].indexOf(suffix) == 0) { arrayNum = i; suffixState = false; break; } } } } suffixArray = suffixArray.length > 0 ? suffixArray:settings.aEmail; if(inputVal=="" && suffix == ""){ hideList($(mailWrap)); arrayNum = 0; createMailList(mailWrap,inputVal,suffix,settings.aEmail,arrayNum); }else{ showList($(mailWrap),w,h,t,l); createMailList(mailWrap,inputVal,suffix,suffixArray,arrayNum); } } } }); $(mailWrap).find("li:not('.first')").live('mouseover',function(){ $(this).addClass("hover").siblings().removeClass("hover"); }); $(mailWrap).find("li:not('.first')").live('mousedown',function(){ $(this).addClass("current").siblings().removeClass("current"); enterVal(mailWrap,elem); hideList($(mailWrap)); }); $(mailWrap).bind("mouseout",function(){ $(mailWrap).find("li:not('.first')").removeClass("hover"); }); }); }; function cursorMove(o,n){ var cursorList = $(o).find("li:not('.first')"),k = new Number(); for(i=0;i<cursorList.length;i++){ if(cursorList[i].className == "current"){ k = i+n cursorList[i].className = ""; }; } if(k < 0) k =0; if(k >= cursorList.length - 1 ) k = cursorList.length - 1; cursorList[k].className = "current"; } function setCaretAtEnd(field){ // IE 系列浏览器 在自动光标跳回文档首问题 var b = document.getElementById(field); if (b.createTextRange){ var r = b.createTextRange(); r.moveStart('character', b.value.length); r.collapse(); r.select(); } } function position(array,value){ // 取得 元素在数组中的位置 for(var i in array){ if(array[i]==value){ return i;break; } } }; function enterVal(oWrap,elem){ elem.val($(oWrap).find("li.current").text()); // 获取高亮内容 到 输入框 }; function showList(oElem,w,h,t,l){ // 显示 邮箱框架 并定位. oElem.css({"display":"block","top":h + t,"left":l,"width":w-2}); }; function hideList(oElem){ // 显示 邮箱框架 oElem.css({"display":"none"}); }; function createMailList(oWrap,sVal,suffix,aEail,nK){ // 创建 候选列表 if(nK < 0 ) {nK = 0;} if(nK > aEail.length-1) {nK = aEail.length - 1;} var mailList = "<li class='first'><span>请选择邮箱类型</span></li>"; var State = true; // 用户键入 后缀 是否匹配候选后缀 的状态 for(k=0; k<aEail.length;k++){ if(suffix!= '' && aEail[k].indexOf(suffix) == 0){ State = false; } } nK = parseInt(suffix!= '' && State && !position(aEail,suffix)?0:nK); if(suffix !='' && State ){ if(nK == 0){ mailList += '<li class="current"><span>'+sVal+'</span>@'+suffix+'</li>'; } else { mailList += '<li><span>'+sVal+'</span>@'+suffix+'</li>'; } } if($.isArray(aEail)){ $.each(aEail, function(i){ if(State && suffix !=''){ if(i == (nK-1) ){ mailList += '<li class="current"><span>'+sVal+'</span>@'+aEail[i]+'</li>'; } else { mailList += '<li><span>'+sVal+'</span>@'+aEail[i]+'</li>'; } } else{ if(i == nK){ mailList += '<li class="current"><span>'+sVal+'</span>@'+aEail[i]+'</li>'; } else { mailList += '<li><span>'+sVal+'</span>@'+aEail[i]+'</li>'; } } }); } mailList = "<ul>" + mailList + "</ul>"; $(oWrap).html(mailList); }; })(jQuery);

HTML 代码    复制

![None.gif][] ![None.gif][]

<div class="f_item">

![None.gif][]

<label class="i_label">邮箱:</label>

![None.gif][]

<input type="text" class="i_text" id="txtLoginID" name="txtLoginID" style="color: rgb(153, 153, 153);">

![None.gif][]

<div id="txtLoginIDTip">

![None.gif][]

</div>

![None.gif][]

</div>

![None.gif][]

<script>
       $("#txtLoginID").emailMatch();
    </script>

posted @ 2016-08-21 22:28 [波霸38][38] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

[jQuery]: https://www.cnblogs.com/sharing1986687846/p/5784393.html
[None.gif]: /images/20220219/f4f3e1998e094e638ab27bf0da679496.png
[38]: https://www.cnblogs.com/sharing1986687846/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=5784393

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 eclipse（二）eclipse 配置代码自动补全怎么配置代码自动补全

问题描述：刚安装好的eclipse，写代码不会自动提示，只有点可以提示解决方案：在windows-preferences-java-editor-conte

小灰灰/ 2022年12月29日 09:12/ 0 赞/ 325 阅读

相关 codeblocks的代码自动补全

1.依次选择setting -> Editor，选择Code completion，按照图中进行设置 ![在这里插入图片描述][watermark_type_ZmFuZ3p

太过爱你忘了你带给我的痛/ 2022年11月16日 01:44/ 0 赞/ 636 阅读

相关 Eclipse代码自动补全

Eclipse代码自动补全 Eclipse代码自动补全具体步骤如下： Eclipse代码自动补全具体步骤如下：打开Window–>P

不念不忘少年蓝@/ 2022年11月07日 04:25/ 0 赞/ 328 阅读

相关 Autocomplete 自动补全JQuery

资料：http://jqueryui.com/autocomplete/ <span style="font-size:14px;"><!doctype html>

红太狼/ 2022年07月24日 03:23/ 0 赞/ 223 阅读

相关 jquery ui 自动补全demo

<!doctype html> <html lang="en"> <head> <meta charset="utf-8">

怼烎@/ 2022年06月02日 04:13/ 0 赞/ 242 阅读

相关使用js实现的邮箱自动补全

1.页面代码 <input type="text" id="username" name="username" list="input_list"/> <datali

Bertha 。/ 2022年05月28日 01:42/ 0 赞/ 265 阅读

相关 jQuery邮箱自动补全代码

[jQuery邮箱自动补全代码][jQuery] JScript 代码复制 ![None.gif][] (function($){ $

你的名字/ 2022年04月24日 04:42/ 0 赞/ 323 阅读

相关 eclipse代码自动补全

1.选择Eclipse菜单条中的Windows菜单下的Preferences项 2.在左侧找到“Java” -> “Editor” -> “Content Assist”

我就是我/ 2022年04月02日 03:57/ 0 赞/ 397 阅读

相关 jquery邮箱自动补全

在使用前需要有如下文件: jquery-1.7.1.min.js jquery.mailAutoComplete-3.1.js 大家可以到网上下载: 【jquer

深藏阁楼爱情的钟/ 2021年12月03日 06:29/ 0 赞/ 449 阅读

相关实现Jquery的自动补全功能

摘要： > jquery有一个自动不全的插件，现在记录一下如何实现jquery的自动补全功能。话不多说，直接开始：第一步：引入支持jquery自动补全的相关插件

左手的ㄟ右手/ 2021年06月11日 15:11/ 0 赞/ 633 阅读