javascript 邮箱输入自动补全插件（转）

最新推荐文章于 2024-05-23 16:08:37 发布
最新推荐文章于 2024-05-23 16:08:37 发布
阅读量72 收藏
点赞数
文章标签： javascript ViewUI 
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>inputSuggest_0.1.js</title>
        <style type="text/css">
            body{margin:0;padding:0;}
            input{width:200px;}
            .suggest-container{border:1px solid #C1C1C1;visibility:hidden;}
            .suggest-item{padding:3px 2px;}
            .suggest-active {background:#33CCFF;color:white;padding:3px 2px;}
        </style>
        <script type="text/javascript" >
        /**
 * JavaScript inputSuggest v0.1
 * Copyright (c) 2010 snandy
 * Blog: http://snandy.javaeye.com/
 * QQ群: 34580561
 * Date: 2010-09-25
 * Download by http://www.codefans.net
 *
 * new InputSuggest({
 *       input         HTMLInputElement 必选
 *       data             Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选
 *       containerCls    容器className
 *       itemCls        容器子项className
 *       activeCls        高亮子项className
 *       width         宽度设置 此项将覆盖containerCls的width
 *    opacity        透明度设置 此项将覆盖containerCls的opacity
 * });
 */

function InputSuggest(opt){
    this.win = null;
    this.doc = null;
    this.container = null;
    this.items = null;
    this.input = opt.input || null;
    this.containerCls = opt.containerCls || 'suggest-container';
    this.itemCls = opt.itemCls || 'suggest-item';
    this.activeCls = opt.activeCls || 'suggest-active';
    this.width = opt.width;
    this.opacity = opt.opacity;
    this.data = opt.data || [];
    this.active = null;
    this.visible = false;
    this.init();
}
InputSuggest.prototype = {
    init: function(){
        this.win = window;
        this.doc = window.document;
        this.container = this.$C('div');
        this.attr(this.container, 'class', this.containerCls);
        this.doc.body.appendChild(this.container);
        this.setPos();
        var _this = this, input = this.input;        

        this.on(input,'keyup',function(e){
            if(input.value==''){
                _this.hide();
            }else{
                _this.onKeyup(e);
            }

        });
        // blur会在click前发生，这里使用mousedown
        this.on(input,'blur',function(e){
            _this.hide();
        });
        this.onMouseover();
        this.onMousedown();

    },
    $C: function(tag){
        return this.doc.createElement(tag);
    },
    getPos: function (el){
        var pos=[0,0], a=el;
        if(el.getBoundingClientRect){
            var box = el.getBoundingClientRect();
            pos=[box.left,box.top];
        }else{
            while(a && a.offsetParent){
                pos[0] += a.offsetLeft;
                pos[1] += a.offsetTop;
                a = a.offsetParent
            }
        }
        return pos;
    },
    setPos: function(){
        var input = this.input,
            pos = this.getPos(input),
            brow = this.brow,
            width = this.width,
            opacity = this.opacity,
            container = this.container;
        container.style.cssText =
            'position:absolute;overflow:hidden;left:'
            + pos[0] + 'px;top:'
            + (pos[1]+input.offsetHeight) + 'px;width:'
            // IE6/7/8/9/Chrome/Safari input[type=text] border默认为2，Firefox为1，因此取offsetWidth-2保证与FF一致
            + (brow.firefox ? input.clientWidth : input.offsetWidth-2) + 'px;';
        if(width){
            container.style.width = width + 'px';
        }
        if(opacity){
            if(this.brow.ie){
                container.style.filter = 'Alpha(Opacity=' + opacity * 100 + ');';
            }else{
                container.style.opacity = (opacity == 1 ? '' : '' + opacity);
            }
        }
    },
    show: function(){
        this.container.style.visibility = 'visible';
        this.visible = true;
    },
    hide: function(){
        this.container.style.visibility = 'hidden';
        this.visible = false;
    },
    attr: function(el, name, val){
        if(val === undefined){
            return el.getAttribute(name);
        }else{
            el.setAttribute(name,val);
            name=='class' && (el.className = val);
        }
    },
    on: function(el, type, fn){
        el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);
    },
    un: function(el, type, fn){
        el.removeEventListener ? el.removeEventListener(type, fn, false) : el.detachEvent('on' + type, fn);
    },
    brow: function(ua){
        return {
            ie: /msie/.test(ua) && !/opera/.test(ua),
            opera: /opera/.test(ua),
            firefox: /firefox/.test(ua)
        };
    }(navigator.userAgent.toLowerCase()),
    onKeyup: function(e){
        var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls;
        if(this.visible){
            switch(e.keyCode){
                case 13: // Enter
                    if(this.active){
                        input.value = this.active.firstChild.data;
                        this.hide();
                    }
                    return;
                case 38: // 方向键上
                    if(this.active==null){
                        this.active = container.lastChild;
                        this.attr(this.active, 'class', aCls);
                        input.value = this.active.firstChild.data;
                    }else{
                        if(this.active.previousSibling!=null){
                            this.attr(this.active, 'class', iCls);
                            this.active = this.active.previousSibling;
                            this.attr(this.active, 'class', aCls);
                            input.value = this.active.firstChild.data;
                        }else{
                            this.attr(this.active, 'class', iCls);
                            this.active = null;
                            input.focus();
                            input.value = input.getAttribute("curr_val");
                        }
                    }
                    return;
                case 40: // 方向键下
                    if(this.active==null){
                        this.active = container.firstChild;
                        this.attr(this.active, 'class', aCls);
                        input.value = this.active.firstChild.data;
                    }else{
                        if(this.active.nextSibling!=null){
                            this.attr(this.active, 'class', iCls);
                            this.active = this.active.nextSibling;
                            this.attr(this.active, 'class', aCls);
                            input.value = this.active.firstChild.data;
                           }else{
                            this.attr(this.active, 'class', iCls);
                            this.active = null;
                            input.focus();
                            input.value = input.getAttribute("curr_val");
                        }
                    }
                    return;

            }

        }
        if(e.keyCode==27){ // ESC键
            this.hide();
            input.value = this.attr(input,'curr_val');
            return;
        }
        if(input.value.indexOf('@')!=-1){return;}
        this.items = [];

        if(this.attr(input,'curr_val')!=input.value){
            this.container.innerHTML = '';
            for(var i=0,len=this.data.length;i<len;i++){
                var item = this.$C('div');
                this.attr(item, 'class', this.itemCls);
                item.innerHTML = input.value + '@' + this.data[i];
                this.items[i] = item;
                this.container.appendChild(item);
            }
            this.attr(input,'curr_val',input.value);
        }

        this.show();

    },
    onMouseover: function(){
        var _this = this, icls = this.itemCls, acls = this.activeCls;
        this.on(this.container,'mouseover',function(e){
            var target = e.target || e.srcElement;
            if(target.className == icls){
                if(_this.active){
                    _this.active.className = icls;
                }
                target.className = acls;
                _this.active = target;

            }
        });
    },
    onMousedown: function(){
        var _this = this;
        this.on(this.container,'mousedown',function(e){
            var target = e.target || e.srcElement;
            _this.input.value = target.innerHTML;
            _this.hide();
        });
    }
}    

        </script>

        <script type="text/javascript">

            window.onload = function(){
                var sinaSuggest = new InputSuggest({
                    input: document.getElementById('sina'),
                    data: ['sina.cn','sina.com','vip.sina.com.cn','2008.sina.com','263.sina.com']
                });
                var sohuSuggest = new InputSuggest({
                    width: 300,
                    opacity: 0.3,
                    input: document.getElementById('sohu'),
                    data: ['sohu.com','sogou.com','chinaren.com','vip.sohu.com','sohu.net','2008.sohu.com','sms.sohu.com']
                });

            }
        </script>
    </head>
    <body>
        <div style="width:400px;margin:30px auto;text-align:center;">
            <label>新浪</label>
            <input type="text" id="sina"/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <label>搜狐</label>
            <input type="text" id="sohu"/>
        </div>

    </body>
</html>
weixin_34235371
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
邮箱地址自动补全插件
03-21
邮箱地址自动补全插件,输入对应的内容时候提示出主流的邮箱后缀，可供用户选择对应的邮箱、
inputSuggest邮箱提示自动补全js插件
weixin_30544657的博客
07-19 79
inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了。像QQ邮箱提示、百度的搜索框提示、淘宝的商品搜索提示等，现在有不少的网站都有类似效果，以提升用户体验。 使用方法： 　　 new InputSuggest({ 　　input HTMLI...
inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
09-05
inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了
邮件自动补齐js插件
牧海归来
01-21 1347
1.加入样式 ul, li {     list-style: none outside none;     margin: 0;     padding: 0; } .auto-tip li {     background: none repeat scroll 0 0 #81DAF5;     font-size: 14px;  
js实现的邮箱自动补全
秘密基地
10-29 8136
今天练习了一个邮箱自动补全的内容，在前端输入邮箱的时候系统可以自动补全，这个技能点比较简单，现在写一下我自己的做法： 这里需要注意两个点： １、前面用户自己输入，后面@之后的内容自动补全 ２、当用户输入@时，可以自动为用户匹配相应的邮箱后缀 ３、用户可以通过点击已匹配好的邮箱输入到框中ＨＴＭＬ５代码（页面部分）：<input id="regemail" class="int-type w-t
邮箱自动补全插件依赖jQuery
08-12
邮箱自动补全插件--依赖jQuery
javascript代码自动补全插件
03-27
NULL 博文链接：https://992012.iteye.com/blog/1173866
eclipse自动补全插件
03-28
eclipse中java、javascript、html代码自动补全
javascript仿百度输入框提示自动下拉补全
11-26
本文实例讲解了javascript输入框自动下拉补全操作，仿百度、谷歌搜索框提示，具体内容如下 效果图： 具体代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>...
JavaScript输入邮箱自动提示实例代码
10-26
主要介绍了JavaScript输入邮箱自动提示实例代码，有需要的朋友可以参考一下
JS实现邮箱提示补全效果
zhuolei123的专栏
02-16 4355
现在要实现的是类似网易登录时的邮箱提示框的效果，不过这里我打算稍微改变一下，就是在输入@的时候再出现邮箱提示列表 实现提示的原理是采用正则进行匹配 效果图如下： 代码如下： ul{padding:0px;margin:0px;} .login_autoComplete{width:256px;border:1px solid #4190db;positio
小插件，通过js实现邮箱自动提示功能
热门推荐
普羅●米修斯 ——— HelloWorld
12-04 1万+
通过js实现邮箱自动提示功能
jQuery插件：表单Email常用邮箱选择控件
peakchen90的博客
10-30 5514
jQuery插件：表单Email常用邮箱选择控件先上截图：用法： $(selector).emailSelector(emailType); //emailType（可选），是一个数组，作为提示邮箱的类型 //如：['@qq.com','@gmail.com','@163.com'] //注意：绑定input的父元素必须为相对定位JS代码：(function ($) {
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 230
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
js知识点汇总之let const 和 var的区别
最新发布
fyw1789的博客
05-23 1078
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 333
将前端传来的时间数组，赋值给对应的属性；
vim代码自动补全插件
04-01
1. YouCompleteMe：这是一个非常强大的代码自动补全插件，支持 C/C++、Python、Java、JavaScript 等多种语言，可以实现非常精确的代码补全和语法检查功能。 2. NeoComplCache：这是一个轻量级的代码自动补全插件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值