利用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"的层时，层的背景色变蓝，字的颜色变成白色，

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

-->

function highLight(obj) {
    var spans = $(obj).siblings();
    spans.each(function() {
      $(this).css({"background":"#FFFFFF","color":"#000000"});
    });
    $(obj).css({"background":"#3399FF","color":"#FFFFFF"});
  }

<!--

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

-->

function delUserName(obj) {
    var code = event.keyCode || e.which;
    if(code == 8) {
      $(obj).remove();
      if(event.srcElement.tagName.toLowerCase() == "span") {
        event.returnValue = false;
      }
    }
  }

<!--

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

 

function resetAccount() {
  var keyCode = event.keyCode || e.which
      var value = $("#input").stk_val();
      if(value == "" && keyCode == 8) {
        var span = $("#input").prev();
        var name = span.get(0).tagName;
        if(name == "SPAN") {
          span.remove();
        }
      }
    }
  }

-->

</script>

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