87,910
社区成员
发帖
与我相关
我的任务
分享求指点收件人输入中输入多个联系人的思路
效果说明：
一个input[type=text]（至少看起来是这样的），其获得焦点后，接收输入，同时显示根据输入内容匹配的联系人
选中该联系人后，该联系人就被框起来，放入到这个input[type=text]（至少看起来是这样的）
然后可以继续输入
这样就在一个input[type=text]中输入了多个联系人
这个应该是目前邮件收件人地址输入的标配了吧？
刚才看了一下某邮箱的html结构
大概是：
输入数据，因为是在输入的指定div中的，所以检查这个指定div，就可以ajax到数据，
多个联系人，看起来直接in-line显示应该也没有问题，
但是我搞不清楚上面的这个结构是怎么获得鼠标/键盘的焦点的，因为它的实际的input[type=text]是被丢得老远的（left=-10000px），
不知道我有说清楚没有
求解答
一个input[type=text]（至少看起来是这样的），其获得焦点后，接收输入，同时显示根据输入内容匹配的联系人
选中该联系人后，该联系人就被框起来，放入到这个input[type=text]（至少看起来是这样的）
然后可以继续输入
这样就在一个input[type=text]中输入了多个联系人
这个应该是目前邮件收件人地址输入的标配了吧？
刚才看了一下某邮箱的html结构
大概是：
<div class="R">
<div class="js-component-emailhide nui-fGetout" id="_mail_emailhide_0_708">
<input type="text" tabindex="-1" role="presentation"> <!-- 不知道这个是啥，看css，left=-10000px -->
</div>
<div unselectable="on" title="发给多人时地址请以分号隔开" class="js-component-emailcontainer nui-multiLineIpt nui-ipt" id="_mail_emailcontainer_0_681">
<div unselectable="on" title="该地址格式有误，请双击修改" class="nui-editableAddr nui-addr nui-editableAddr-err">
<!-- 已经输入的联系人数据 -->
<em unselectable="on" class="nui-addr-email">red</em>
</div>
<div class="js-component-emailinput nui-editableAddr nui-editableAddr-edit nui-addr" id="_mail_emailinput_0_682">
<!-- 在多个联系人已经填入的情况下，点击A、B联系人之间，这个div就跟着跑过去了 -->
<input type="text" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开" tabindex="1" class="nui-editableAddr-ipt">
<span class="nui-editableAddr-txt">W</span>
</div>
<div unselectable="on" title="testmail@mailserver.com" class="nui-editableAddr nui-addr nui-addr-hasAdd">
<!-- 已经输入的联系人数据 -->
<strong unselectable="on" class="nui-addr-name">testmail</strong>
<em unselectable="on" class="nui-addr-email">testmail@mailserver.com</em>
<a hidefocus="hidefocus" class="nui-addr-add" href="javascript:void(0)"><b class="nui-ico nui-ico-edit"></b></a>
</div>
</div>
</div>
输入数据，因为是在输入的指定div中的，所以检查这个指定div，就可以ajax到数据，
多个联系人，看起来直接in-line显示应该也没有问题，
但是我搞不清楚上面的这个结构是怎么获得鼠标/键盘的焦点的，因为它的实际的input[type=text]是被丢得老远的（left=-10000px），
不知道我有说清楚没有
求解答
...全文
请发表友善的回复…
发表回复
heweina2007 2014-02-10
- 打赏
- 举报
麻烦问一下，用tag-it是怎么实现的？
redlz2500 2014-01-05
- 打赏
- 举报
厄，已经完成了用tag-it完美搞定
redlz2500 2013-09-23
- 打赏
- 举报
大哥，有什么结果没有啊……
redlz2500 2013-09-16
- 打赏
- 举报
直接原样贴出来了……
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>
sunxing007 2013-09-16
- 打赏
- 举报
你给我贴个完整的代码吧,包括js,css,html, (引用的jquery之类的可以不要)要不然这半拉子的东西,我也没办法测试.
redlz2500 2013-09-16
- 打赏
- 举报
琢磨了下，自己写了个测试
#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
}));
});
});
redlz2500 2013-09-16
- 打赏
- 举报
我看那个dom结构，应该只有一个div是用于输入的，而这个div是根据用户在整个编辑框中点击后才跟着鼠标走的，也就是说本身并没有另外制造一个获取点击的div啊
redlz2500 2013-09-16
- 打赏
- 举报
我现在应该有3个贴还没有接，因为还没有搞懂，而且现在暂时没有搞那一块……
别看结贴率啊哥
sunxing007 2013-09-15
- 打赏
- 举报
才想起看你的结贴率，然后我有点后悔说这么多。。。
sunxing007 2013-09-15
- 打赏
- 举报
如我给的图片，
1的位置有一个空白的一个字符宽的span，可响应onclick然后插入输入框从而可以插入光标；
1的位置有一个空白的一个字符宽的span，可响应onclick然后插入输入框从而可以插入光标；
sunxing007 2013-09-15
- 打赏
- 举报
问题不难，但是很烦。
我给你说一下思路，因为图片传不成功， 你可以拷贝下面的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,或者插入一个新的收件人；
