JSFiddle - React, Tailwind, and code Playground
HTML
<h2 id="Panel" class=""><a href="#" >Title</a></h2>
<fieldset>
<div class="FormItem">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="FormItem">
<p>Some text</p>
<textarea rows="2" cols="20" style="height: 40px;"></textarea>
</div>
<div class="FormItem">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</fieldset>
CSS
.alert-counter {
color:red
}
JavaScript
jQuery(document).ready(function () {
var textarea = $("h2#Panel").next("fieldset").find('.FormItem:nth-child(2) textarea');
var counter = $("<div class='dnnLabel' style='position: relative;'><label><span id='counter'></span></label></div>");
$(textarea).after(counter);
$(textarea).CountCharacters({
Start_Count: 0,
Amount_Result: "counter",
Alert_Class: "alert-counter",
Amount_Limit: 19,
maximumCharacters: 5
});
});
(function ($) {
$.fn.CountCharacters = function (options) {
var defaults = {
Start_Count: 0,
Amount_Result: false,
Alert_Class: false,
maximumCharacters: 9
}
var options = $.extend(defaults, options);
return this.each(function () {
var characters = options.Start_Count;
if (options.Amount_Result != false) {
$("#" + options.Amount_Result).append("Aantal karakters: <strong>" + characters + "</strong>");
}
$(this).keyup(function () {
if (options.Amount_Result != false) {
var number_of_characters = $(this).val().length;
$("#" + options.Amount_Result).html("Aantal karakters: <strong>" + number_of_characters + "</strong>");
if (number_of_characters >= options.maximumCharacters) {
$("#" + options.Amount_Result).addClass(options.Alert_Class);
} else {
$("#" + options.Amount_Result).removeClass(options.Alert_Class);
}
}
});
});
};
})(jQuery);