邮箱选取收件人效果

以前写了一个简单效果。你可以根据你的需求修改。
输入后回车
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>js 文本框效果</title>
<style type="text/css">
.inputs{width:600px;height:auto; border:1px solid #ddd;margin:100px auto;line-height:20px;}
.divInputs{width:auto;height:auto;line-height:20px;min-height:20px; }
.divHistory{height:20px;width:auto;line-height:20px;float:left;display:inline; margin:0px 3px; background-color:#dee;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */}
.clear{clear:both;} </style>
</head>
<body><div class="inputs" id='inputs'>
<div class="divInputs" id='divInputs'>
<input  type='text' value="" style="float:left;border:0px;height:20px; " id='txtInput'/>
<div class='clear'></div>
</div>
</div>
<input  type='button' value="查看设置的值" id="btn"/>
</body>
<script type="text/javascript">window.onload=function()
{
   var inputs=[];
   var txtInput = document.getElementById("txtInput");
   var divInputs = document.getElementById("divInputs");
   document.getElementById("btn").onclick=function(){
    alert(inputs);
   } ;

   document.getElementById("inputs").onclick=function(){
        txtInput.focus();
   } ;
   txtInput.onkeydown=function(e)
   {
        e=e||event;
        if(e.keyCode==13){ // 回车
            var input = txtInput.value.trim();
            if(input==""){
                return;
            }
            if(inputs.indexOf(input)>-1){
                alert("内容已存在");
                return;
            }
            var div = document.createElement("div");
            div.innerHTML ="<span>" +input+"</span>";
            div.className="divHistory";
            var span = document.createElement("span");
            span.style.cssText ="top:0px;right:0px;position:relative;z-index:99999;font-size:12px; border:1px solid red;";
            span.innerHTML="X";
            div.appendChild(span);
            divInputs.insertBefore(div,txtInput);
            inputs.push(input);
            txtInput.value ="";
            span.onclick=function(){
                this.parentNode.parentNode.removeChild(this.parentNode);
                inputs.remove(input);
            };
        }
   };
};
String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g,'');
};
Array.prototype.indexOf=function(value){
    if(this!=null && this.length>0){
        for(var i=0;i<this.length;i++)
        {
            if(this[i]==value){ return i;}
        }
    }
    return -1;
};
Array.prototype.removeAt=function(index){
this.splice(index,1);
}
Array.prototype.remove=function(obj){
var index=this.indexOf(obj);
if (index>=0){
this.removeAt(index);
}
}
</script>
</html>
3楼+1楼就完整了
关键是3楼的技术正是我缺少的我不会写标签的那种css 但是也得修改后才能用移动端点后退删掉一条联系人这个操作没有不能让用户用手指点那个小小的x
autocomplete也不能使用得自己写js代码进行ajax请求因为文本框先用来存放进行ajax请求的查询数据比如“姚”，然后选中某一条比如“姚xx”后替换“姚”加入分隔符，再输入新的查询数据进行ajax请求时是以最后一个分号后的数据作为参数，选中查询结果中某一条替换刚才进行ajax请求的查询字符串因为文本框起这两个作用所以无法简单使用autocomplete达成效果

调试易

邮箱选取收件人效果

解决方案 »