I am currently working on a project where I need to implement a character count feature for each field in my form. Below is a snippet of code from my C# file:
List<Document> record= _repository.Document.GetChecklist(entity.checklist, Convert.ToInt32(entity.ref)).ToList();
if (record.Count() > 0)
{
int i = 0;
foreach (var r in record)
{
_html.Append("<tr>");
_html.Append("<td style=\"padding-left:20px\" class=\"td-control\">
<textarea cols=\"50\" rows=\"5\" maxlength=\"1000\" id=\"desc" + i + "\">" + (String.IsNullOrEmpty(r.desc) ? "" : r.desc.ToString().Trim()) + "</textarea>
<div id=\"char-count\">
<span id=\"current\">0</span><span>/ 1000</span></div></td>"
_html.Append("</tr>");
i++;
}
}
In the CSS section, I have tried styling the character count display as follows:
#char-count
{
float: right;
padding: 0.1rem 0 0 0;
font-size: 0.875rem;
}
However, when it comes to implementing the character count functionality using jQuery, I seem to be facing some challenges. Here is the jQuery code snippet that I have attempted:
$("#desc").keyup(function () {
$("#desc").each(function () {
var characterCount = $(this).val().length,
current = $('#current');
current.text(characterCount);
});
});
I apologize if my explanation is unclear. As a beginner in coding and English not being my first language, I may struggle with technical terms.