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">
  ...
</textarea>

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>
</ul>

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.

$(function(){
  $('.example').textWildCardArea();
});

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.