jQuery插件：表单Email常用邮箱选择控件

jQuery插件：表单Email常用邮箱选择控件

先上截图：

用法：

    $(selector).emailSelector(emailType);
    //emailType（可选），是一个数组，作为提示邮箱的类型
    //如：['@qq.com','@gmail.com','@163.com']

    //注意：绑定input的父元素必须为相对定位

JS代码：

(function ($) {
    /**
     * @param {Array} emailType Email类型, eg:['@qq.com','@163.com']
     */
    $.fn.emailSelector = function (emailType) {
        var $input = this;
        var input = $input[0];
        var $parent = $input.parent();
        var $ul = $('
');
        var _emailType; //真正用来遍历的数组
        var index = 0; //激活的li的索引

        //必须绑定在input标签上
        if (input.nodeName.toUpperCase() !== 'INPUT') {
            throw new Error('必须绑定在input标签上')
        }
        //父元素必须是相对定位
        if ($parent.css('position') !== 'relative') {
            throw new Error('input的父元素必须是相对定位');
        }
        //设置默认邮箱类型
        if (!emailType || !$.isArray(emailType) || emailType.length === 0) {
            emailType = [
                '',
                '@qq.com',
                '@163.com',
                '@126.com',
                '@gmail.com',
                '@sina.com',
                '@sohu.com',
                '@outlook.com',
                '@139.com'
            ];
        } else {
            emailType.unshift('');
        }

        //添加到父节点上
        $input.attr('autocomplete','off');
        $ul.css({top: $input.css('height')});
        $ul.addClass('emailSelector');
        $parent.append($ul);

        //绑定事件
        $(document).on('mouseup', function () {
            $ul.hide();
        });
        $ul.on('mouseover', 'li', function (e) {
            var target = e.target;
            index = $(target).attr('data-index') - 0;
            setActive();
        });
        $ul.on('click', 'li', function (e) {
            $input.val(e.target.innerHTML);
            $ul.hide();
        });
        $input.on('keyup', function (e) {
            //up
            if (e.keyCode == 38) {
                if (index <= 0) {
                    index = _emailType.length - 1;
                } else {
                    index--;
                }
                setActive();
            }
            //down
            else if (e.keyCode == 40) {
                if (index >= _emailType.length - 1) {
                    index = 0;
                } else {
                    index++;
                }
                setActive();
            }
            //enter
            else if (e.keyCode == 13) {
                $input.val($ul.find('li').eq(getIndex()).text());
                $ul.hide();
            }
            //输入
            else {
                $ul.show();
                var text = $input.val().trim();
                if (text.length > 0 && text.indexOf('@') == -1) {
                    _emailType = emailType;
                    init(text);
                } else if (text.length > 0 && text.indexOf('@') > 0) {
                    var i = text.indexOf('@');
                    var type = text.substr(i);
                    _emailType = emailType.filter(function (t) {
                        if (t.indexOf(type) != -1) return true;
                    });
                    init(text, type);
                } else {
                    $ul.hide();
                }
            }
        });

        //初始化DOM
        function init(text, replace) {
            $ul.html('');
            index = 0;
            if (replace !== undefined) {
                text = text.replace(replace, '');
            }
            $.each(_emailType, function (i, type) {
                type = type.toString().trim();
                var $li = $('
' + text + type + '
');
                $li.attr('data-index', i);
                if (i == index) {
                    $li.addClass('active');
                }
                $ul.append($li);
            });
        }

        //设置激活样式
        function setActive() {
            $ul.find('li').removeClass('active');
            $ul.find('li').eq(getIndex()).addClass('active');
        }

        //获取Index
        function getIndex() {
            if (index < 0) {
                return 0;
            } else if (index >= _emailType.length) {
                return _emailType.length - 1;
            } else {
                return index;
            }
        }
    }
})(jQuery);

CSS代码：

ul.emailSelector {
    position: absolute;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
    margin: 0;
    padding: 0;
    min-width: 240px;
    border-radius: 5px;
}

ul.emailSelector > li {
    background-color: #fff;
    color: #333;
    font-family: Arial, "微软雅黑";
    padding: 5px 15px;
    cursor: pointer;
}

ul.emailSelector > li.active {
    /* 激活样式 可以根据自己需要修改 */
    background-color: #09c;
    color: #fff;
}

HTML示例代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>Email常用邮箱选择控件title>
    <link rel="stylesheet" href="jquery.emailSelector.css"/>   
    <script src="jquery.min.js">script>                     
    <script src="jquery.emailSelector.js">script>       
head>
<body>

    
    <div style="position:relative;">
        <input type="text" id="email"/>
    div>
    <script>
        $('#email').emailSelector();
    script>
body>
html>