Add Wildcards To Textareas With The textWildCardArea.js Plugin

File Size: 4.87 KB
Views Total: 282
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Add Wildcards To Textareas With The textWildCardArea.js Plugin

textWildCardArea.js is a jQuery plugin that makes it easier to add or remove wildcards (like tags) from a textarea element.

How to use it:

1. Assign a unique ID to your textarea element.

<textarea id="MyTextWildCardArea" class="example">

2. Create a list of tags to be inserted into the textarea.

  • data-target: Selector of target textarea
  • data-tag: Any tag
<ul data-toggle="tag" data-target="#MyTextWildCardArea">
  <li><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
  <li><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>

3. Download the plugin and place the JavaScript textWildCardArea.js after loading the latest jQuery library.

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

4. Initialize the plugin on the textarea and done.


5. Apply your own styles to avaialble and unavailable tags.

.tag.tag--available {
  cursor: pointer;
  font-weight: 600;

.tag.tag--unavailable {
  cursor: pointer;
  font-weight: normal;
  font-style: italic;
  text-decoration: line-through !important;

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