1、模仿CSDN上传资料中需要填的标签。
2、根据 bootstrap-5.2.3 写的一个dynamicTags(动态标签)生成的小工具
项目文件结构如下:
一、index_dynamicTags.html核心代码,分3块
- 1、动态标签生成
- 2、获取所有标签值
- 3、根据结果展示标签
<main class="container" style="margin-top: 50px;">
<div class='text-center'>
<label class="form-label ">动态标签</label>
</div>
<div>
<div class="mb-3">
<label class="form-label row " style="float:left ;padding:8px 24px 0 0;">标签</label>
<div id="dynamicTags_id" class="dynamicTags row" >
<input id="addTag" class='btn btn-outline-dark col-md-2' type = 'button' value = '+添加标签'></input>
<label class="form-label col-md-4" style="padding:8px 0 0 30px;">按回车 Enter 创建标签</label>
</div>
</div>
</div>
<hr class="featurette-divider">
<div class='text-center'>
<label class="form-label ">获取标签</label>
</div>
<input id="getTags" class='btn btn-outline-dark col-md-2' type = 'button' value = '获取所有标签'></input>
<div id="getTagsText"></div>
<hr class="featurette-divider">
<div class='text-center'>
<label class="form-label ">加载标签</label>
</div>
<div id="loadTags"></div>
</main>
二、Tag 标签封装,bootstrap-tag-byqws-2.0.js
function Tag(options){
var opt = {//参数保存在此对象中
opts: options
};
var obj = {
init: function () {//初始化
var tag_ = $("<span>");
tag_.addClass('byqws_tag');
tag_.text(opt.opts.text);
var tag_close_ = $("<button>");
tag_close_.addClass('byqws_tag_close btn-close');
tag_.append(tag_close_);
tag_close_.on('click', function(){
tag_.remove();
});
return tag_;
}
};
return obj.init();
}
三、动态生成标签,获取所有标签值,根据结果展示标签,dynamicTags-1.0.js
window.onload=function(){
var tag_input_ = "<input id='tag_input' class='form-control' type='text' placeholder=''></input>";
$('#addTag').on('click', function(){
$('#addTag').attr('style', 'display: none;');
var a = $("<div class='row col-md-2'>"+tag_input_+"</div>");
$('#addTag').after(a);
$('#tag_input').focus();
$("#tag_input").blur(function() {
// 在这里编写失去焦点事件的处理逻辑
$('#addTag').removeAttr('style');
$('#tag_input').parent().remove();
});
$("#tag_input").keydown(function(e){
// 按回车键生成标签
if(e.keyCode == 13) {
var tag = new Tag({
text:$("#tag_input").val()
});
$('#addTag').before(tag);
$('#addTag').removeAttr('style');
$('#tag_input').parent().remove();
}
});
});
$('#getTags').on('click', function(){
var tags = [];
$('.byqws_tag').each(function() {
tags.push($(this).text());
});
$('#getTagsText').append(tags);
console.log(tags);
});
var tags_ = ['java','html']
for(var i = 0 ; i<tags_.length;i++){
console.log(tags_[i]);
var tag = new Tag({
text:tags_[i]
});
$('#loadTags').append(tag);
}
//
}
结果展示
项目下载地址:dynamicTags(动态标签)