邮件的收件人输入框可以选择多人也可以自己输入，其实现原理是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>元素中输入即可。
 
   
本文出自 “2332615” 博客，请务必保留此出处http://2342615.blog.51cto.com/2332615/711919