清空文本框的逗号和分号有关问题
日期：2014-05-16 浏览次数：20447 次
清空文本框的逗号和分号问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>
<style type="text/css">
.recipients{ width:408px; display:block; height:auto; border:1px solid #ccc; padding:2px;}
.un_selector input{width:95px;height:17px;border-width:0;outline:none;}
.un_selector span{float:left;margin:1px 2px 1px 0;width:100px;height:19px;line-height:19px; display:block;background:#F7F6ED url(http://img.bbs.csdn.net/upload/201402/13/1392256213_883907.png) no-repeat 0 0;color:#369;overflow:hidden;}
.un_selector em{padding-left:5px;width:80px; margin:0px; padding:0px; FONT-STYLE: normal; font-size:12px; font-weight:normal;}
.un_selector .x{float:right;width:15px;height:19px;background:url(http://img.bbs.csdn.net/upload/201402/13/1392256213_883907.png) no-repeat 100% -19px;text-indent:-9999px;overflow:hidden; cursor:pointer;}
.un_selector .x:hover{background-position:100% -38px;}
.cl{ clear:both;}
.bf{border: 1px solid #92BBDF;}
</style>
<script type="text/javascript">
$(function(){
$("#username").focus(function(){
$(".recipients").addClass("bf");
}).blur(function(){
$(".recipients").removeClass("bf");
});
$("#username").bind("keydown",function (event) {
var $this=$(this);
var this_v=$this.val().replace(/[,|;|\s]+/g,"");
//按下回车键、逗号、分号
if (event.keyCode == 13 || event.keyCode == 188 || event.keyCode == 59) {
if(isExist(this_v)){
alert("已经存在" + this_v);
$this.val("");
return;
}
var id='str' + Math.floor(Math.random() * 10000);
var str="<span id=\""+id+"\"><a class=\"x\">删除</a><em class=\"z\">"+this_v+"</em></span>";
$this.before(str);
$this.val('');
$(".x","#"+id).bind("click",function(){
$("#"+id).remove();
$this.show();
});
//限制收件人最多12位
if($("span",".un_selector").length >= 12){
$this.hide();
}
}
//按下删除键
if (event.keyCode == 8 && this_v == '') {
$("span:last",".un_selector").remove();
$this.show();
}
});
});
function isExist(userName){
var i=0;
$("span em",".un_selector").each(function(){
if($(this).text()==userName)
i++;
});
return (i>0)?true:false;
}
</script>
</head>
<body>
<div class="recipients">
<div class="un_selector" onclick="$('username').focus();">
<input id="username" type="text" autocomplete="off" name="username">
</div>
<div class="cl"></div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
