Bootstrap Snippet custom tags create using jquery and css using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
    <title>Tags</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    
</head>
<body>
   <div class="textbox">
        <div class="teaxhead">
            
        </div>
        <div class="textInput">
            <input type="text" name="text" id="inputTag" >
            <input type="button" name="text" class="button" value="Add">
            
        </div>
   </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
    margin: 0;
    padding: 0;
}
.textbox{
    width: 400px;
    height: 600px;
    margin: 10px auto;
    border: 1px solid #ccc; 
}
.teaxhead{
    width: 100%;
    height: 522px;
    border-bottom:  1px solid #ccc; 
    padding: 12px 5px;
}
input#inputTag {
    width: 70%;
    float: left;
    height: 40px;
    margin: 2px;
}
 .button{
    width: 27%;
    float: left;
    background: #5980d6;
    height: 45px;
    margin: 2px;
    border: 1px solid #ccc;
    color: #fff;
    font-size: 27px;
 }
 .tags {
    background: #00e207d1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
     
    var arr = [];
     $(document.body).on('click', '.button', function(event) {
        event.preventDefault();
        /* Act on the event */
        let inputbox = $('#inputTag');
        let teaxhead = $('.teaxhead');
        let tagName = inputbox.val();
        if (tagName == "" || tagName == null) {
            alert('Please Enter  the text ');
            return false;
        }else{ 
              
            let i=0;
            for(tag in arr){
                if (arr[tag]==tagName) {
                    alert("This  tag already Exits");
                    i++;
                }
            }
            if (i==0) {
                arr.push(tagName);
                AddTag(tagName,inputbox,teaxhead,i);
            }
            
        }
     });
});
 
var AddTag = function(tags,inputbox,teaxhead,i){
    let Tag = '<span class="tags '+sucess()+'" id="'+tags+'">'+tags+' <span class="tagsclose" data-pid="'+tags+'" >×</span></span>';
    inputbox.val('');
    teaxhead.append(Tag);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"custom tags create using jquery and css"
Bootstrap 4.1.1 Snippet by saddamSaifi1992

Related: See More

Questions / Comments:

"custom tags create using jquery and css" Bootstrap 4.1.1 Snippet by saddamSaifi1992

Related: See More

Questions / Comments:

"custom tags create using jquery and css"
Bootstrap 4.1.1 Snippet by saddamSaifi1992