邮件的收件人输入框可以选择多人也可以自己输入，其实现原理是span+input或div+input 。

大致样式如下（若不设置tabindex=-1属性，onkeydown事件对div层无效）：

<div id="address">

<span tabindex='-1' name="select" οnkeydοwn="delUserName(this)"></span>

<input type="text" id="input" οnkeydοwn="resetAccount()">

</div>

<script type="text/javascript">

<!--

当点击name="select"的层时，层的背景色变蓝，字的颜色变成白色，

其余未被点击的层恢复为背景白色，字黑色

-->

1. function highLight(obj) {  
2.     var spans = $(obj).siblings();  
3.     spans.each(function() {  
4.       $(this).css({
   "background":"#FFFFFF","color":"#000000"});  
5.     });  
6.     $(obj).css({
   "background":"#3399FF","color":"#FFFFFF"});  
7.   }  
8.  

<!--

当按backspace键时，被选中的层被删除，event.returnValue = false的作用是，禁止按下backspace键时，网页回退

-->

1. function delUserName(obj) {  
2.     var code = event.keyCode || e.which;  
3.     if(code == 8) {  
4.       $(obj).remove();  
5.       if(event.srcElement.tagName.toLowerCase() == "span") {  
6.         event.returnValue = false;  
7.       }  
8.     }  
9.   } 

<!--

删除input框中的输入，当输入框中无字符时，则删除input前的span

1. function resetAccount() {  
2.   var keyCode = event.keyCode || e.which
3.       var value = $("#input").stk_val();  
4.       if(value == "" && keyCode == 8) {  
5.         var span = $("#input").prev();  
6.         var name = span.get(0).tagName;  
7.         if(name == "SPAN") {  
8.           span.remove();  
9.         }  
10.       }  
11.     }  
12.   } 

-->

</script>

其中id="address"的div就是输入框，只不过该div的样式需要修改成输入框的样式，当选人时动态生成name="select"的层：var span = $("<span tabindex='-1' οnkeydοwn='delUserName(this)'>" + name + ";</span>");，并将name="select"的层放置在<input>元素前：$("#input").before(span);。当用户自己输入时，即在<input>元素中输入即可。