CODEWITHSUNDEEP
blazorblazor-server-side
Don
Don

Reputation: 53

Blazor: counting characters in a textarea in Blazor (not .js)

I have a input textarea that I am limiting the character count on (done) that I also want to provide visual feedback for regarding how many characters are remaining.

Here's my textarea:

<textarea type="text" name="TheNameOfMyField" class="TheNameOfMyClass" 
          value="" rows="2" maxlength="255"></textarea>

I could do this in .js, no problem, but this case calls for a native solution & as much as I'd love 'the answer,' a finger pointed to resources that would enable me to ask fewer questions is equally welcome - just not the official MS documentation, I need it written at a level a UI developer working in a new environment can understand ::grin::

Also, if someone wanted to weigh-in on Blazor UI frameworks (in so much that they may be able to help automate tasks like this one - it's the first one I could not locate at least a partial answer to online), I have the budget to buy into one, but I do not have the time to test several, so I am currently going without (no contacts working in Blazor, everyone I know is C++, .JS, PHP, etc.).

In case I wasn't clear enough as to my objective, this isn't me (it's .js & I need a C# Blazor solution), but conceptually it's pretty close (except I'll be limiting the number of chars in the field, so no negative numbers):

https://www.itrelease.com/2011/05/count-characters-in-text-area-using-javascript/

Cheers!

Upvotes: 3

Views: 3858

Answers (1)

Zsolt Bendes
Zsolt Bendes

Reputation: 2589

Is something like this what you where looking for?

<textarea @bind="text"
          @bind:event="oninput"
          maxlength="@MAX_TEXT_COUNT" />
<label>Chars left: @(MAX_TEXT_COUNT - text.Count())</label>

@code {
    string text = "1234";
    const int MAX_TEXT_COUNT = 5;
}

The @bind="text" and @bind:event="oninput" will tell blazor to update the text variable on each keystroke. The maxlength="@MAX_TEXT_COUNT" will prevent the user to input more symbols than MAX_TEXT_COUNT

The <label>Chars left: @(MAX_TEXT_COUNT - text.Count())</label> just prints out the difference.

Here is a snippet to test it online: https://blazorrepl.com/repl/GYOrRkbb5532bvYW23

Upvotes: 15

Related Questions