利用bootstrap生成标签，并可删除标签，效果图如下
1.png
2.png
3.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Theme Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="../../dist/js/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="input-group label-display col-md-8" style="cursor: pointer;">
</div>
<br>
<div class="input-group col-md-8">
<div class="input-icon-group">
<div class="input-group" style="width:100%">
<input type="text" class="form-control input-text" placeholder="请输入标签（字数1-10）" value="" data-clearbtn="true" maxlength="10"/>
<input type="hidden" class='tags' name='tags' />
</div>
</div>
<span class="input-group-btn">
<button class="btn btn-primary gen" type="button" >生成标签</button>
</span>
</div>
</div>
</body>
<script>
$('.gen').on('click',function(){
var inputVal = $('.input-text').val();
if(inputVal.length==0 || inputVal.length>10){
alert('标签字数限制1-10');
return false;
}
var tags = $('.tags').val();
if(tags.length>0){
var tagsArr = tags.split('||');
var res = $.inArray(inputVal,tagsArr);
console.log(res)
if(tagsArr.length>=5){
alert('标签数不能超过5个');
return false;
}
if(tagsArr.indexOf(inputVal)!=-1){
alert('标签已经存在，请勿重复输入');
return false;
}
tags = tags + '||' + inputVal;
}else{
tags = inputVal;
}
$('.tags').val(tags);
$('.input-text').val('')
var appendDiv= ' <span class="label label-success">'+inputVal+' <i class="glyphicon glyphicon-remove" data="'+inputVal+'" onClick=\'changeVal(this)\'></i></span>';
$('.label-display').append(appendDiv);
});
function changeVal(obj){
var delText = obj.data;
var tagsArr = $('.tags').val().split('||');
tagsArr.splice($.inArray(delText,tagsArr),1);
tags = tagsArr.join('||');
$('.tags').val(tags);
$(obj).parent().remove();
}
</script>
</html>
网友评论