Tags Input With Character/Tag Counter Using jQuery

An accessible, minimal-looking, user-friendly, jQuery based tags input component inspired by Twitter.com.

Key Features:

• Limit the maximum number of characters allowed to type.
• Limit the maximum number of tags allowed to insert.
• Auto focus on the tags input on page load.
• Add tags with Enter, Space, or Apostrophe key.
• Delete tags with Backspace or Delete key.
• Easy to get the tags that have been added to the input.

How to use it:

1. Load the Font Awesome Iconic Font for the tag remove button. OPTIONAL.

<link rel="stylesheet" href="/path/to/fontawesome/css/all.css" />

2. Create a tags input on the webpage and define the initial tags as follows:

<div class="tags-and-input">
  <span class="tag" data-value="jqueryscript">jQueryScript <i class="fas fa-times-circle"></i></span>
  <input type="text" class="input" autocomplete="false">
</div>

3. Add custom error messages to the webpage:

<div class="errors">
  <span class="error empty">Can not add empty Tag</span>
  <span class="error syntax">please don't add specific characters or numbers just Alphapetical Letters ONLY.</span>
  <span class="error underscore">Please Don't Start the tag with (_)</span>
  <span class="error already">This tag is already added</span>
  <span class="error max_chars">You have reach the maximum limit of characters per Tag</span>
  <span class="error max_tags">You have reach the maximum limit of Tags</span>
</div>

4. Add character & tag counters to the webpage.

<div class="details">
  <div class="char-length"><span></span> Characters Left</div>
  <div class="tags-length"><span></span> Tags Left</div>
</div>

5. Create a button to show the tags you just inserted.

<button class="add_tags">Get Tags</button>
<div class="results">
  <div class="results-errors">Error</div>
  <div class="array">
  </div>
</div>

6. Load the main script script.js after jQuery to enable the tags input.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/script.js"></script>

7. The example CSS to style the tags input.

.tags-and-input {
  display: flex;
  flex-wrap: wrap;
}

.tags-and-input .tag {
  margin-left: 5px;
  margin-bottom: 5px;
  background-color: #48cae4;
  color: #fff;
  text-align: center;
  padding: 10px 5px 10px 10px;
  border: 1px solid #ced4da;
  border-radius: 10px;
  position: relative;
  user-select: text;
  overflow: hidden;
}

.tags-and-input .tag::selection {
  background-color: #ced4da;
}

.tags-and-input .tag i {
  cursor: pointer;
  margin-left: 10px
}

.tags-and-input .tag i:hover {
  color: #ced4da;
}

.tags-and-input .input {
  margin-left: 8px;
  font-size: 18px;
  color: #ced4da;
  font-weight: bold;
  height: 40px;
  width: 20%;
  flex-grow: 1;
  border: none;
  outline: none;
}

.errors {
  padding: 20px 10px 10px 10px;
}

.errors .error {
  color: #df2935;
  font-size: 18px;
  font-weight: bold;
  display: none;
}

.details {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-weight: bold;
}

.details .char-length.max,
.details .tags-length.max {
  color: #df2935;
  animation: alert 1s ease-in-out infinite;
}

@keyframes alert {
  0%   {opacity: 1;}
  50%  {opacity: .5;}
  100% {opacity: 1;}
}

.details .char-length span,
.details .tags-length span {
  color: #48cae4;
}

---

This awesome jQuery plugin is developed by Mohamed-Elhawary. For more Advanced Usages, please check the demo page or visit the official website.