问题不难，但是很烦。
我给你说一下思路，因为图片传不成功， 你可以拷贝下面的url看图片：
图片在这里：http://images.cnblogs.com/cnblogs_com/sunxing007/231491/o_163mail.jpg
1 首先在收件人那一栏里用一个div，然后给他设样式，使他看起来像个输入框；
2 输入框里当鼠标点击的时候，动态加入一个<input type=text />,这个输入框要没有边框，宽度要随着字符的输入自动增长；当该输入框检测到输入的分号以后，就在输入框的签名插入一个span，同时把输入框的内容交给该span，然后给该span设置一些样式，使他看起来像一个独立的收件人；然后清空输入框的内容，等待后续的输入；做完这步， 你的程序应该可以有模有样的添加多个收件人了；
3 然后还要处理删除收件人的问题，如果输入框里面么有内容的情况下用户输入了backspace，则删除该输入框前面的那个span（如果存在的话）；
4 这样做还不够，比如我现在输入了4个收件人，但是我想像163邮箱那样，在第一个后面插入光标来删除第一个怎么办? 也好办，在每个独立的收件人span的后面拼接一个空白的，只有一个字符宽度的小span（不妨叫他spanSeparator），这个spanSeparator它接收onclick事件，当onclick的时候，把输入框插入到该spanSeparator前面来相应用户输入backspace,或者插入一个新的收件人；
我给你说一下思路，因为图片传不成功， 你可以拷贝下面的url看图片：
图片在这里：http://images.cnblogs.com/cnblogs_com/sunxing007/231491/o_163mail.jpg
1 首先在收件人那一栏里用一个div，然后给他设样式，使他看起来像个输入框；
2 输入框里当鼠标点击的时候，动态加入一个<input type=text />,这个输入框要没有边框，宽度要随着字符的输入自动增长；当该输入框检测到输入的分号以后，就在输入框的签名插入一个span，同时把输入框的内容交给该span，然后给该span设置一些样式，使他看起来像一个独立的收件人；然后清空输入框的内容，等待后续的输入；做完这步， 你的程序应该可以有模有样的添加多个收件人了；
3 然后还要处理删除收件人的问题，如果输入框里面么有内容的情况下用户输入了backspace，则删除该输入框前面的那个span（如果存在的话）；
4 这样做还不够，比如我现在输入了4个收件人，但是我想像163邮箱那样，在第一个后面插入光标来删除第一个怎么办? 也好办，在每个独立的收件人span的后面拼接一个空白的，只有一个字符宽度的小span（不妨叫他spanSeparator），这个spanSeparator它接收onclick事件，当onclick的时候，把输入框插入到该spanSeparator前面来相应用户输入backspace,或者插入一个新的收件人；
1的位置有一个空白的一个字符宽的span，可响应onclick然后插入输入框从而可以插入光标；
琢磨了下，自己写了个测试
#inputtextarea {
position: relative;
height: 25px;
width: 600px;
top: 50px;
left: 50px;
cursor:text;
border:1px solid black;
}.newdiv{
float: left;
white-space: nowrap;
border:1px solid red;
margin:2px;
}<div id="inputtextarea">
<!-- <div name="forheight" style="height:20px;width:1px;"></div>-->
</div>var clickcount=0;
window.addEvent('domready',function(){
$('inputtextarea').addEvent('click',function(e){
//获取焦点，并插入一个div
var j;
//虽然在这里获取的是inputtextarea的焦点，但是其实内部的也可以跟着获取……，所以需要进行判断
clickcount++;
var mytarget=e.target;
if(mytarget.get('id')!='inputtextarea'){
//说明不是实际的div，需要获取其外部的div或者相邻关系
mytarget=$('inputtextarea');
}
mytarget.grab(new Element('div',{
class:'newdiv',
html:'newmailer'+clickcount
}));
});
});发现……其实也没有这么难啊，
但是这个测试在点击的时候就自动增加一个进去，增加到最后面，因为我不知道如何判断点击位置是在已经插入的哪两个childnode之间的……求解答下这个问题吧……
直接原样贴出来了……
moo用的1.4.5……<html>
<title>多个输入测试</title>
<style type="text/css">
<!--
#inputtextarea {
position: relative;
height: 25px;
width: 600px;
top: 50px;
left: 50px;
cursor:text;
border:1px solid black;
}.newdiv{
float: left;
white-space: nowrap;
border:1px solid red;
margin:2px;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../js/mootools/mootools-core.js"></script>
<script type="text/javascript" src="../js/mootools/mootools-more.js"></script>
<body text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="inputtextarea">
<!-- <div name="forheight" style="height:20px;width:1px;"></div>-->
</div>
<script type="text/javascript">
var clickcount=0;
window.addEvent('domready',function(){
$('inputtextarea').addEvent('click',function(e){
//获取焦点，并插入一个div
var j;
//虽然在这里获取的是inputtextarea的焦点，但是其实内部的也可以跟着获取……，所以需要进行判断
clickcount++;
var mytarget=e.target;
if(mytarget.get('id')!='inputtextarea'){
//说明不是实际的div，需要获取其外部的div或者相邻关系
mytarget=$('inputtextarea');
}
mytarget.grab(new Element('div',{
class:'newdiv',
html:'newmailer'+clickcount
}));
});
});
</script>
</body>
</html>