实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证

最新推荐文章于 2021-12-29 19:45:53 发布
最新推荐文章于 2021-12-29 19:45:53 发布
阅读量1.7k 收藏 2
点赞数 2
分类专栏： jquery 文章标签： 邮件地址 163收件人效果 邮件地址自动提示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jylonger/article/details/50099007
版权

结合autocomplete自写的一个小插件,实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证。

有个关键就是修改了autocomplete.js中在鼠标点击时添加了阻止默认事件e.preventDefault()

插件名：jquery.inputemail.js ,源码如下：

/*
 * 实现163收件人效果
 * 作者：甜甜老爸
 */
(function ($) {
    $.fn.inputemail = function (options) {//options 参数
        var defaultVal = {
            mails: "",
            tipdata: [{full_name: 'ceshi1', email: 'ceshi1@21gmail.com'}, {
                full_name: 'ceshi2',
                email: 'ceshi2@21gmail.com'
            }]
        };

        //默认值
        var obj = $.extend(defaultVal, options);
        return this.each(function () {
            var $this = $(this);//获取当前对象
            initmail();

            //初始化事件
            function initmail() {
                if (obj.mails != "") {
                    $this.find(".lg-editableAddr").remove();
                    $.each(obj.mails.split(","), function (b, q) {
                        q = q.replace(/</, '<').replace(/>/, '>');
                        var err = "";
                        var firstsub = q.substring(0, 4);
                        var lastsub = q.substring(q.length - 4);
                        if (firstsub == "<" && lastsub == ">") {
                            q = q.replace(/</, '').replace(/>/, '');
                        }
                        if (!checkemail(q)) {
                            err = "lg-error";
                        }
                        $this.append($('<div class="lg-editableAddr ' + err + '"><span class="edminfo">' + q + '</span><b class="edmclose">x</b></div>'));

                    });
                    var $eminfo = $('<div class="edm-addr">'
                        + '<input type="text" class="edm-input" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开">'
                        + '<span class="edm-addr-txt"></span></div>');
                    $this.find(".edm-addr").remove();
                    $this.append($eminfo);
                    $this.find(".edm-input").focus();
                    getresult();
                } else {
                    $this.find(".lg-editableAddr").remove();
                    $this.find(".lastresult").val("");
                }
                initclick();
                inputkeyup();
                inputprompt();

            }

            function initclick() {
                $this.unbind('click').click(function (e) {
                    e.stopPropagation();
                    if (!$this.find(".edm-input").is(':focus')) {
                        var $eminfo = $('<div class="edm-addr">'
                            + '<input type="text" class="edm-input" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开">'
                            + '<span class="edm-addr-txt"></span></div>');
                        var xs = e.offsetX + $(this).offset().left;
                        var ys = e.offsetY + $(this).offset().top;
                        //console.log(xs + "," + ys + "点击的位置")
                        var isz = 0;
                        $this.find(".lg-editableAddr").each(function () {
                            // console.log($(this).offset().left + "," + ($(this).offset().top + 23))
                            var lgx = $(this).offset().left;
                            var lgy = $(this).offset().top + 23;
                            if (lgx > xs && lgy > ys) {
                                isz = 1;
                                $this.find(".edm-addr").remove();
                                $eminfo.insertBefore(this);
                                $this.find(".edm-input").focus();
                                return false;
                            }
                        });
                        if (isz == 0) {
                            $this.find(".edm-addr").remove();
                            $this.append($eminfo);
                            $this.find(".edm-input").focus();
                        }

                    }

                    inputkeyup();
                    inputprompt();

                });
                $this.find(".edminfo").unbind('click').click(function (e) {
                    e.stopPropagation();
                    $this.find(".edminfo").removeClass("edmactive");
                    $(this).addClass("edmactive");
                });
                $this.find(".edminfo").unbind('dblclick').dblclick(function (e) {
                    var v = $(this).html();
                    var $eminfo = $('<div class="edm-addr">'
                        + '<input type="text" class="edm-input" value="' + v + '" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开">'
                        + '<span class="edm-addr-txt">' + v + '</span></div>');
                    $this.find(".edm-addr").remove();
                    $eminfo.insertAfter($(this).parent());
                    $(this).parent().remove();
                    $this.find(".edm-input").width($this.find(".edm-addr-txt").width() + 20);
                    var t = $this.find(".edm-input").val();
                    $this.find(".edm-input").val("").focus().val(t);
                    getresult();

                    inputkeyup();
                    inputprompt();


                });
                $this.find(".edmclose").unbind('click').click(function (e) {
                    e.stopPropagation();
                    $(this).parent().remove();
                    $this.find(".edm-addr").remove();
                    getresult();

                    inputkeyup();
                    inputprompt();

                });
            }

            //input事件
            function inputkeyup() {

                $this.find(".edm-input").unbind('keydown').bind('keydown', function (e) {

                    var thisone=$(this);
                    var $edtxt = $this.find('.edm-addr-txt');
                    if (e.type == 'keydown' && e.keyCode == 8) {
                        var preval = $edtxt.html();
                        if (preval == "") {
                            var classname=thisone.parent().prev()[0].className;
                            if(classname!="lastresult"){
                                thisone.parent().prev().remove();
                            }

                        }
                        getresult();
                    }
                });

                $this.find(".edm-input").unbind('keyup blur').bind('keyup blur', function (e) {
                    var a=0;
                    var thisone=$(this);
                    var v = thisone.val();
                    if (v.indexOf('<')>0) {
                        v = v.replace(/</g, '<').replace(/>/g, '>');
                    }
                    v = v.replace(/;/g, ',');
                    v = v.replace(/</g, '<').replace(/>/g, '>');

                    var $edtxt = $this.find('.edm-addr-txt');
                    $edtxt.html(v);
                    console.log($(".ac_results").is(":hidden"))
                    if (v != "") {
                        if (e.keyCode == 13 || e.type == 'blur') {
                            var firstsub = v.substring(0, 4);
                            var lastsub = v.substring(v.length - 4);
                            if (firstsub == "<" && lastsub == ">") {
                                v = v.replace(/</g, '').replace(/>/g, '');
                            }
                            // if ($(".ac_results").is(":hidden") || $(".ac_results").length<1) {
                            if (a==0){
                                var z=v.substring(v.length-1);
                                if (z==","){
                                    v=v.substring(0,v.length-1);
                                }
                                $.each(v.split(","),function(b,q){
                                    //console.log(q)
                                    var err = "";
                                    if (!checkemail(q)) {
                                        err = "lg-error";
                                    }
                                    var $onemail = $('<div class="lg-editableAddr ' + err + '"><span class="edminfo">' + q + '</span><b class="edmclose">x</b></div>');
                                    $onemail.insertBefore(thisone.parent());
                                });

                                $this.find(".edm-addr").width(20);

                                //$this.find(".edm-addr").remove();
                                // }
                                a++;
                            }
                            thisone.val('');
                            $edtxt.html("");
                            getresult();
                        }
                        initclick();

                    }
                    //
                    //if (e.type == 'keyup' && e.keyCode == 8) {
                    //    var preval = $edtxt.html();
                    //    if (preval == "") {
                    //        thisone.parent().prev().remove();
                    //    }
                    //    getresult();
                    //}
                    if (e.keyCode !=undefined) {
                        thisone.width($edtxt.width() + 20);
                    }
                });
            }


            //赋值结果
            function getresult() {
                var lastval = "";
                $this.find('.edminfo').each(function () {
                    var hsclass = $(this).parent().hasClass('lg-error');
                    if (!hsclass) {
                        lastval += $.trim($(this).html()) + ",";
                    }
                });
                lastval = lastval.substring(0, lastval.length - 1);
                lastval = lastval.replace(/</g, '<').replace(/>/g, '>');
                $this.find(".lastresult").attr("value", lastval);
            }

            //检查邮件地址
            function checkemail(val) {
                var realmail = $.trim(val);
                if (realmail.indexOf(",") > 0) {
                    return false;
                }
                if(realmail.split("<").length>2){
                    return false;
                }
                if(realmail.indexOf(">")>0){
                    if(realmail.substring(realmail.length - 4,realmail.length)!=">"){
                        return false;
                    }
                }

                var regstart = /<(.*?)>/;
                var email = regstart.exec(realmail);
                if (email != null) {
                    realmail = email[1];
                }
                var regx = /^\w+([\.\'-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
                return regx.test(realmail);
            }

            //输入提示
            function inputprompt() {
                $(".ac_results").remove();
                var data = obj.tipdata;
                $this.find(".edm-input").autocomplete(data, {
                    minChars: 1,
                    width: 300,
                    scroll: true,
                    multipleSeparator: "",
                    scrollHeight: 200,
                    selectFirst:true,
                    matchContains: true,
                    autoFill: false,
                    formatItem: function (item) {
                        if (item.full_name != "" && item.full_name != null && item.full_name != undefined) {

                            return item.full_name + "<" + item.email + ">";
                        }

                        return item.email;
                    },
                    formatMatch: function (row, i, max) {

                        return row.full_name + "<" + row.email + ">";
                    },
                    formatResult: function (item) {
                        if (item.full_name != "" && item.full_name != null && item.full_name != undefined) {

                            return item.full_name + "<" + item.email + ">";
                        }
                        return item.email;
                    }

                })
                    .result(function (event, item) {
                        $(this).blur();
                    });
            }
        });
    }
})(jQuery);





样式文件 app.css,如下：

body{
    margin: 0;padding: 0; font-family: "Microsoft Yahei"; font-size: 12px;
}

.lg-emailcontainer{ width: 100%;line-height: 30px;min-height: 30px; overflow: hidden; border:1px solid #ddd; cursor: text}
.lg-editableAddr{ float: left;margin-left: 8px;}
.edminfo{
    background-color:#e8f0f7;padding: 2px 5px;
    border:1px solid #ddd;
     cursor: pointer;
}
.edmclose{background-color:#e8f0f7;padding: 2px 5px;
    color: #999;
    border:1px solid #ddd; margin-left: -1px; cursor: pointer;}
.edminfo:hover, .edmclose:hover{
    background-color:#9ACCFB;
}
.lg-editableAddr .edmactive{background-color:#2d59b3; color: #fff}
.edm-addr{float:left; margin-left: 2px;}
.edm-input{border:none; padding: 2px 5px; width: 10px; outline: none;}
.edm-addr-txt{ display: none;}
.lg-error .edminfo{
     background-color:#cf3300;
     color: #fff;
 }
.lg-error .edmclose{
    background-color:#ffeaea;
    color: #cc3300;
}


html文件 index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现收件人效果</title>
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/jquery.autocomplete.css" />
</head>
<body>
<br>

<div id="email1" class="lg-emailcontainer">
    <input type="hidden" class="lastresult">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.autocomplete.min.js"></script>
<script src="js/jquery.inputemail.js"></script>
<script>
    //初始值参数
    var mails="初始1<woaini520@21gmail.com>,初始2<4523434@qq.com>,hello.ye@gmail.com";
    //联想邮件地址参数
    var data = [{full_name:'测试1', email:'ceshi1@21gmail.com'}, {full_name:'测试12', email: 'ceshi2@163.com'},{full_name:'测试13', email:'ceshi3@21gmail.com'}, {full_name:'测试14', email: 'ceshi4@21gmail.com'},{full_name:'测试15', email:'ceshi5@21gmail.com'}, {full_name:'测试16', email: 'ceshi6@21gmail.com'}];
    $("#email1").inputemail({
        mails:mails,
        tipdata:data
    });
</script>
</body>
</html>



实现效果如下图:




飞奔的猫
关注
专栏目录
实现163收件人效果
11-30
163邮箱是中国知名的电子邮箱服务商，其收件人输入框功能强大，包括退格删除、修改、粘贴、邮件地址验证以及自动提示等，这些功能为用户提供了高效且便捷的邮件发送体验。下面我们将详细讨论这些知识点。 1. **退格...
自定义控件---类似添加邮件收件人效果
羊羊的学习旅程
11-11 1643
自定义控件：增加控件时会则适应高度，宽度不够时会跳至下一行；无焦点可以控制高度，有焦点显示最大高度。 直接上代码： public class LineWrapViewGroup extends ViewGroup { private int lineHeight = 0; private int hSpacing = 0; private int vSp
html+css+jquery制作邮件删除效果
小言同学的博客
12-29 1622
一、题目要求 在邮件列表前都有一个复选框，单击可以选中或取消选中。当单击“全选/全不选”按钮，所有复选框都随之选中或取消选中。单击“删除邮件”按钮可删除被选中的邮件，如图所示。 二、实现思路及步骤 1.设计页面HTML结构，应用CSS样式。 2.找到“全选/全不选”按钮，绑定onclick事件。 3.查找所有的复选框，把每个复选框的checked属性值变为true或false，实现全选或全不选。 4.找到“删除邮件”按钮，绑定onclick事件。 5.查找所有checked属性值为true
jquery仿邮件收件人删除事件
IT生活
10-31 1182
//获取文本框光标位置：javascript版本 function getCursortPosition(domObj) { var position = 0; if (document.selection) { //for IE domObj.focus(); var sel = document.selection.createRange(); sel...
仿163填写邮件地址自动显示下拉（无优化）
09-06
该示例代码旨在实现一个功能，即模仿163邮箱的自动填充邮件地址的功能。当用户在输入框中输入字符时，系统会根据已有的邮件地址列表动态显示出匹配的建议，用户可以通过按下ENTER键选择其中一个匹配项。这个功能提高...
Jquery仿163收件人效果+邮箱验证
07-26
本主题聚焦于使用jQuery实现一个仿163邮箱的收件人输入框效果，同时集成邮箱验证功能和autocomplete的模糊匹配查询，这些功能在构建用户友好的Web应用时非常实用。 首先，让我们深入理解jQuery仿163收件人效果。163...
PHP实现163邮箱自动发送邮件
10-22
在提供的`demo.html`文件中，通过一个简单的表单来接收用户输入的收件人地址、邮件标题和邮件内容。 - **表单数据提交**: 用户填写表单后，数据会通过POST方法提交到`sendmail.php`文件。 - **数据接收与处理**: 在`...
修改select2实现163邮箱收件人输入的效果
dzq584462393的专栏
07-23 2855
公司需要这样的一个实现效果，但是自己水平还还不是很高。只能修改别人的代码来实现我ode
删除邮箱中邮件的源代码
10-23
用VC编写的关于邮箱操作的一个完整例子。
jQuery+ajax实现批量删除功能完整示例
10-16
主要介绍了jQuery+ajax实现批量删除功能,结合完整实例形式分析了jQuery+ajax结合bootstrap与layer.js插件实现的批量删除与交互功能相关操作技巧,需要的朋友可以参考下
Jquery仿收件人效果autocomplete
12-13
Jquery仿收件人效果 autocomplete,Jquery仿收件人效果 autocomplete， 多选。 测试可用
仿qq邮箱添加收件人效果
08-16
自己做完邮箱系统提取分享出来。html代码简单易读，js源码可方便修改扩展。仿qq邮箱效果实现收件人，抄送，密送等文本框块级操作，自动补全，邮箱格式校验。下载好用望留言、评论支持！
就是类似163邮箱的发信选择收件人效果
longcimi5598的博客
01-08 1599
rt 就是这样的~ 在右边选择人员，在input里一个一个显示 789789789@qq.com 是这样的,请问高手怎么实现哦~
原生js实现QQ邮箱邮件拖拽删除功能
冰雪为融的博客
03-15 1924
步骤分析：根据数据结构生成HTML结构全选和单选功能的实现，以及当其为选中状态时它的父级的颜色变化的点击删除，删除结构同时删除数据给每一个li绑定mousedown，tip显示，并且定位在鼠标位置鼠标移动时，tip跟随，取消默认行为碰撞检测是否拖到“已删除”项鼠标松开、删除结构和数据过程实现HTML代码&lt;body&gt; &lt;div class="wrap" id="box"&gt; ...
模拟163邮箱输入实现自动补全功能
该资源是一个网页设计示例，目标是模仿163邮箱地址的输入框功能，实现自动显示下拉选项供用户选择。当用户在输入框内输入特定字符（例如“1”）后，预设的电子邮件地址列表将作为隐藏域中的数据呈现。用户可以通过按...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值