邮件分享

<style>
            em{ font-style: normal;}
            #txtSendTo_bak{border: solid 1px #bfbfbf;min-height:24px;line-height: 24px; cursor: text; width: 500px; float: left; }
            #txtSendTo_bak:after{clear:both;width:100%;}
            .emailInputDiv{float:left;position: relative;height:16px; padding: 0 10px }
            #emailInput{height:16px;width:100%;border: none;outline:none; position: absolute; left: 0; top:0; }
            #emailInput:focus{border:none}
            .mail_container{float:left; border: solid 1px #06576e; border-radius: 5px;height:16px;line-height: 16px;font-size: 12px; margin:2px;padding-left:2px; font-family: "宋体";}
            .mail_container em{margin-right:10px;max-width: 100px;display: inline-block; overflow: hidden;height:16px;}
            .mail_container a{ display: inline-block;width:14px;height:14px; text-align: center;line-height: 14px; vertical-align: top;}
            #emailList{ display: none; height:100px;width:200px;}
            .error{border:solid 1px #EDB8B8; background: #FFEAEA;}
        </style>

<div id="txtSendTo_bak">
            <!--
                <div class="mail_container"><em>sadf</em><a class="aClose">X</a></div>
            -->
            <div class="emailInputDiv">
                <input id="emailInput"/>
                <span id="editInput"></span>
            </div>
            
        </div>
        <div style="height:200px; border: solid 1px #000; 100%;clear:both;" id="sendContent"></div>
        <div id="emailList">
            <p>1111@163.com</p>
            <p>22222@qq.com</p>
            <p>3333@163.com</p>
        </div>

$(function(){
                 $("#txtSendTo_bak").click(function(){
                     $("#emailInput").focusEnd();
                 })
                
                var timer;
                $("#emailInput").bind({
                    keydown:function(){
                        $("#emailList").show().css({
                            "top":"40px",
                            "left":"0"
                        })
                        timer = setInterval(function () {
                            $("#editInput").html($("#emailInput").val() + "w")
                            console.log($("#emailInput").val())
                        },200)
                    },
                    blur:function(){
                        
                        var txt = '<div class="mail_container"><em>'+ $.trim($(this).val()) +'</em><a class="aClose">x</a></div>';
                        var addIs = true;
                        if($.trim($("#emailInput").val()) == ""){
                            return false
                        }else{
                            if($(".mail_container em").length > 0){
                                $(".mail_container em").each(function(){
                                    if($(this).html() == $.trim($("#emailInput").val())){
                                        addIs = false;    
                                    }
                                })
                                if(addIs){
                                    $(this).parent().before(txt);
                                }
                            }else{
                                $(this).parent().before(txt);
                                addIs = true;
                            }
                            $("#emailInput").val("")
                        }
                        
                        removeMail();
                        
                        if (timer) {
                            clearInterval(timer);
                        }
                        isEmail($.trim($(".mail_container:last em").html()));
                    },
                    focus:function(){
                        
                    }
                })
                $("#emailList p").bind("click",function(){
                    $(".mail_container:last em").html($(this).html());
                    //isEmail($(this).html());
                    $(this).parent().hide();
                    removeMail();
                    $(".mail_container:last").removeClass("error");
                })
                $("#sendContent").click(function(){
                    $("#emailList").hide();
                })

            })
            
            function removeMail(){
                $(".mail_container a").bind("click",function(){
                    $(this).parent().remove();
                    event.stopPropagation();  
                })
            }
            
            function isEmail(txt){
                var txt = txt;
                var myreg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
                if(!myreg.test(txt))
                {                    
                    $(".mail_container:last").addClass("error")
                }else{
                    $("#emailList").hide();
                }
                
            }
            
            $.fn.setCursorPosition = function(position){  
                if(this.lengh == 0) return this;  
                return $(this).setSelection(position, position);  
            }  
              
            $.fn.setSelection = function(selectionStart, selectionEnd) {  
                if(this.lengh == 0) return this;  
                input = this[0];  
                if (input.createTextRange) {  
                    var range = input.createTextRange();  
                    range.collapse(true);  
                    range.moveEnd('character', selectionEnd);  
                    range.moveStart('character', selectionStart);  
                    range.select();  
                } else if (input.setSelectionRange) {  
                    input.focus();  
                    input.setSelectionRange(selectionStart, selectionEnd);  
                }  
              
                return this;  
            }  
              
            $.fn.focusEnd = function(){  
                this.setCursorPosition(this.val().length);  
            }