在JS中，手动添加标签

蓝斑.json

已于 2023-11-28 07:57:02 修改

阅读量350

点赞数

分类专栏： vue javascript 文章标签： javascript 开发语言 ecmascript

于 2023-11-28 07:56:35 首次发布

本文链接：https://blog.csdn.net/m0_73358221/article/details/129537062

版权

vue 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

javascript

36 篇文章 0 订阅

订阅专栏

纯个人笔记


<!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>标签</title>
    <!--引入一个jQuery -->
    <script src="./common/Js/jquery.js"></script>
</head>
<style>
    .label-box{
        width:1000px;
        height: 50px;
        border:1px solid #999;
        margin:auto;
        margin-top:100px;
    }
    .label-box button{
        width:120px;
        height:40px;
        margin-top:5px;
        background:#00c296;
        color:#fff;
        border:none;
        border-radius: 5px;
        margin-left:10px;
    }
    .alert-add-label{
        width:100%;
        height:100%;
        background:rgba(0,0,0,.3);
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        display: none;
    }
    .div1{
        width:500px;
        height:200px;
        background:#fff;
        margin:auto;
        margin-top:100px;
        border:1px solid #ccc;
        border-radius: 5px;
    }
    .alert-add-label div p{
        line-height:35px;
        margin-top:0px;
        padding-left:20px;
        font-weight:bold;
        border-bottom:1px solid #eee;
    }
    .alert-add-label div p label{
        float:right;
        margin-right:10px;
        font-weight:500;
        color:#999;
        cursor: pointer;
    }

    .alert-add-label div input{
        width:400px;
        height:40px;
        border:1px solid #ccc;
        margin-left:50px;
        margin-top:30px;
    }
    .label-botton{
        width:100%;
        height:50px;
        text-align: center;
        margin-top:30px;
    }
    .label-botton button:first-child{
        background:#00c296;
        color:#fff;
        border:none;
        width:60px;
        height:35px;
        border-radius: 5px;
        cursor:pointer;
    }

    .label-botton button:last-child{
        background:#ccc;
        color:#fff;
        border:none;
        width:60px;
        height:35px;
        border-radius: 5px;
        cursor: pointer;
        margin-left:20px;
    }

    .label-box label{
        padding:2px 10px;
        border:1px solid #ccc;
        line-height:30px;
        margin-top:7px;
        float:left;
        margin-left:10px;
        background:#efefef;
    }
#label-box label{
    background:#b9b9b920;
    padding:0px 10px; 
    color:#007986;
    font-size:12px;
    border:1px solid #ccc;
}
</style>
<body>
    <!-- 自定义添加 '文章' 标签 -->
    <form method="post"  action="./DataBase.php">
        <div class="label-box" id="label-box">
            <button type="button" id="add">添加标签</button>
        </div>
        <button>提交</button>
    </form>
    
        <!--弹出菜单-->
        <div class="alert-add-label">
            <div class="div1">
                <p>添加标签 <label onclick="closeAlertDiv();">X</label></p>
                <input type="text" id="keyword" name="keyword" placeholder="请输入关键词" />
                <div class="label-botton">
                    <button id="submitLabel">确定</button>
                    <button onclick="closeAlertDiv();">取消</button>
                </div>
            </div>
           
        </div>
      
</body>
</html>
<script>

    $('#submitLabel').click(function(){//确认按钮
        var keyword = document.getElementById("keyword").value;//获取输入框的value值
        if(keyword){
            $('#add').before('<label>'+keyword+'</label>');//向#add元素的前面追加元素
            document.getElementById("keyword").value='';//将输入框清空
            //创建表单
            $('.label-box').append('<input type="text" name="label[]" value="'+keyword+'" />');//创建表单 将keyword镶嵌进默认值
            $('.alert-add-label').hide();//隐藏弹窗
        }else{
            $('.alert-add-label').hide();
        }
    });

    function closeAlertDiv (){//取消按钮
        $('.alert-add-label').hide();
    }
  
    $('#add').click(function(){//添加标签
        $('.alert-add-label').show();
        document.getElementById("keyword").focus();//过去输入框的焦点
    });

</script>