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