Rafael Cachoeira
Posted on September 27, 2021
A jQuery plugin for textarea to add and remove wildcards from text
Basic Usage
Declare a textarea and declare a list of tags to use with UL LI
<textarea id="MyTextWildCardArea"></textarea>
<nav>
<ul data-toggle="tag" data-target="#MyTextWildCardArea">
<li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
<li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
</ul>
</nav>
$('#MyTextWildCardArea').textWildCardArea();
It is also possible to instantiate with many text areas.
<textarea id="TextAreaExample" class="my-textarea"></textarea>
<nav>
<ul data-toggle="tag" data-target="#MyTextWildCardArea">
<li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
<li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
</ul>
</nav>
<textarea id="AnotherTextArea" class="my-textarea"></textarea>
<nav>
<ul data-toggle="tag" data-target="#MyTextWildCardArea">
<li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
<li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
</ul>
</nav>
$('.my-textarea').textWildCardArea();
data attributes
- data-toggle="tag": Required: define the type tag for a element
- data-target="#elementId": Required: define the target textarea to observer
classes
- tag tag-available: the plugin uses this class to control a toggle state.
- tag tag-unavailable: the plugin uses this class to control a toggle state. At least one class is required
The plugin doesn't have css styles, but this css can be useful for a basic style
.tag.tag--available {
cursor: pointer;
font-weight: 700;
}
.tag.tag--unavailable {
cursor: pointer;
font-weight: normal;
font-style: italic;
text-decoration: line-through;
}
Usability
- Click once for add wildcard to the textarea
- Click once for remove all wildcards from the textarea
- If a textarea already has data coming from the server, the plugin must observe and apply the toggle state on the tags
Code: https://github.com/raafacachoeira/jquery-text-wildcard-area
💖 💪 🙅 🚩
Rafael Cachoeira
Posted on September 27, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
