Tags InputΒ is a quick and plain JavaScript-based tag entry component that enables the user to add tags individually or insert multiple tags separated by a comma at one time.
bs tags input, tags input jquery, tags input html, javascript tags input
How to make use of it:
1. Create a tags input on the web page.
<input placeholder="Type tags separated by comma" />
2. Create a container to show the tags you simply typed.
<div class="tag-container"> <!-- <div class="tag"> <span>Tag</span> <i class="close"></i> </div> --> </div>
3. Insert the tags-input.js
script to the web page.
<script src="tags-input.js"></script>
4. The essential CSS types for the tags input.
.input-container { border: 2px solid var(--primary-opaque); border-radius: .2rem; display: flex; align-content: flex-start; padding: .4rem; margin-bottom: .4rem; } .tag-container { border: 2px solid var(--primary-opaque); border-radius: .2rem; display: flex; flex-wrap: wrap; align-content: flex-start; padding: .4rem; overflow-x: auto; } .tag-container, .input-container input, .tag-container .tag { background: rgba(0, 0, 0, 0.2); color: var(--white); } .tag-container .tag { margin: .4rem; padding: .4rem .6rem; border-bottom: .01rem solid var(--primary); font-size: 1.2rem; display: flex; align-items: center; cursor: default; } .tag i { font-size: 0.8rem; font-style: normal; margin-left: .4rem; transform: translateY(0.08rem); } .close::after { content: "β"; height: 24px; width: 24px; } .input-container input { padding: .4rem; font-size: 1.2rem; border: 0; outline: none; flex: 1; }
Convenient Tags Input In Plain JavaScript, Tags Input Plugin/Github
See Demo And Download
Official Website(gpaiva00): Click Here
This superior jQuery/javascript plugin is developed by gpaiva00. For extra Advanced usage, please go to the official website.
Be First to Comment