利用div实现邮件收件人的输入框

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

大致样式如下(若不设置tabindex=-1属性,onkeydown事件对div层无效):

<div id="address">

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

<input type="text" id="input" onkeydown="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' onkeydown='delUserName(this)'>" + name + ";</span>");,并将name="select"的层放置在<input>元素前:$("#input").before(span);。当用户自己输入时,即在<input>元素中输入即可。

你可能感兴趣的:(jquery,select,div)