默认已有标签。ds,不会重复添加
文章标签：
效果图如下
代码
<!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.0">
<title>Document</title>
<style>
/*标签*/
.tagSelect{
display: flex;
height: 24px;
padding: 4px 0;
line-height: 24px;
}
.tagItemBox{
display: flex;
}
.tagItem{
display: flex;
margin-right: 10px;
border: 1px solid #0fa6d0;
border-radius: 3px;
}
.tagName{
float: left;
overflow: hidden;
padding: 0 5px;
min-width: 10px;
display: block;
max-width: 100px;
white-space: nowrap;
outline: none;
}
.tagDelBtn{
float: left;
padding: 0 6px;
height: 22px;
color: #0fa6d0;
cursor: pointer;
background: none;
}
.addTagBtn{
padding: 0 5px;
border: 1px solid #0fa6d052;
border-radius: 3px;
background: #fff;
cursor: pointer;
}
.addTagBtn img{
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div class="tagBox">
默认已有标签。ds,不会重复添加
<div class="tagText">文章标签：</div>
<div id="tagSelect" class="tagSelect">
<!-- <input type="hidden" class="tagInput">-->
<div class="tagItemBox">
<!-- <div class="tagItem">-->
<!-- <span class="tagName" contenteditable="true"></span>-->
<!-- <button class="tagDelBtn">X</button>-->
<!-- </div>-->
</div>
<button class="addTagBtn"><img src="img/addTagBtnImg.png">添加文章标签</button>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var tagSelect = {
tagSelectId: [],
tagSelectName: []
};
var tagNameFlag = false;//标签回车键
//标签回车键
$(document).bind('keyup','.tagItem .tagName', function(event) {
if (event.keyCode == "13" && tagNameFlag) {
//回车执行查询
// $('#search_button').click();
var str = $(event.target).html()
$(event.target).html('');
$(event.target).html(str.split('<div>')[0]);
console.log($(event.target).html().split('<div>')[0])
// getC(event.target)
$('.addTagBtn').click();
}
});
//点击添加标签
$('.addTagBtn').on('click', function () {
var tagItemNum = $('#tagSelect .tagItem').length;
if (tagItemNum < 6) {
tagNameFlag = true;
var str = '<div class="tagItem">\n' +
' <span class="tagName" contenteditable="true"></span>\n' +
' <button class="tagDelBtn">X</button>\n' +
' </div>'
$('#tagSelect .tagItemBox').append(str);
getC($('.tagItemBox .tagName')[tagItemNum])
} else {
tagNameFlag = false;
alert('最多只能添加6个标签！')
}
});
//标签，失去焦点事件
$(document).on('blur', '.tagName', function () {
if ($(this).html().length == 0) {
$(this).parent('.tagItem').remove();
} else {
if (tagSelect.tagSelectName.indexOf($(this).html()) == -1) {
$(this).attr('contenteditable', false);
getTagsNames($(this).html())
} else {
// 已经添加标签，不会重复添加
$(this).parent('.tagItem').remove();
}
}
})
//标签回车键
$(document).bind('keyup','.tagItem .tagName', function(event) {
if (event.keyCode == "13" && tagNameFlag) {
//回车执行查询
// $('#search_button').click();
var str = $(event.target).html()
$(event.target).html('');
$(event.target).html(str.split('<div>')[0]);
console.log($(event.target).html().split('<div>')[0])
// getC(event.target)
$('.addTagBtn').click();
}
});
//获取焦点光标getC($('.tagName'))
function getC(el) {
// el = el[0]; // jquery 对象转dom对象
el.focus();
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
//判断光标位置，如不需要可删除
if (sel.anchorOffset != 0) {
return;
} ;
sel.removeAllRanges();
sel.addRange(range);
// $(document).keyup(function(event){
// if(event.keyCode ==13){
// $(event.target).html().replace(/[\r\n]/g,"")
// if($(event.target).html().length==0){
// $(this).parent('.tagItem').remove();
// }else {
// $(event.target).attr('contenteditable', false);
// }
// }
// });
}
//获取文章标签
function getTagsNames(tagName) {
var data = {
"name": tagName,
}
// createTagListApi(data).then(function (dataList) {
// $('.tagItemBox .tagItem:last-child').attr('indexid', dataList.content.id)
// addArrData(tagSelect.tagSelectId, dataList.content.id.toString())
// addArrData(tagSelect.tagSelectName, dataList.content.name)
// console.log('addArrData', tagSelect.tagSelectId, dataList.content)
// })
var dataList = { content:{id: 77,name: "ds"}}
$('.tagItemBox .tagItem:last-child').attr('indexid', dataList.content.id)
addArrData(tagSelect.tagSelectId, dataList.content.id.toString())
addArrData(tagSelect.tagSelectName, dataList.content.name)
console.log('addArrData', tagSelect.tagSelectId, dataList.content)
};
//数组中添加不重复元素
var addArrData = function (arr, val) {
if ($.inArray(val, arr) < 0) {
arr.push(val);
// return true
} else {
// return false
}
};
//移除数组中指定元素
function arrRemove(arr, val) {
var index = arr.indexOf(val);
if (index > -1) {
arr.splice(index, 1);
}
};
//删除文章标签
$(document).on('click', '.tagDelBtn', function () {
arrRemove(tagSelect.tagSelectId, $(this).parent('.tagItem').attr('indexid'))
arrRemove(tagSelect.tagSelectName, $(this).parent('.tagItem').find('.tagName').html())
$(this).parent('.tagItem').remove();
});
</script>
</body>
</html>
