Introduction
Textareas are an essential tool of the web, allowing applications to collect additional information from users. This helps ...
For further actions, you may consider blocking this person and/or reporting abuse
This was very clear, clever, and simple! It's one of those form quirks that we've all seen at some point but not all of us have implemented. I like that the text warning pops up towards the end to help with accessibility too.
Thank youu :)
Your post is constructive and very clear, thanks ! 🙌
Thank you 🙂
Thanks for the tutorial, I'll try to implement it into a small personnal project
You're welcome :) Awesome
Nice article 🚀
Thank you :)
very good and helpful, thanks.
It's super cool
Thank you :) :)
awesome
Thankss :)
That was really well explained, thank you.
My site has a couple of text areas so i ended up adding a for loop to the javascript which detected all text areas and looped though them. Seems to work OK.
Let me know if you would like me to post the extended code.
Cheers
That's a great workaround 👍, and sure you can post the extended code
Sure thing. Now i will start by saying I am still very new to all this. But here goes.
Here is the HTML for the textareas:
Here is the updated CSS:
And here is the updated Javascript:
That's quite nice, but I do find some little issues that might arise with this approach. The first issue being that the warning text doesn't popup at the end, instead it's visible from start to finish, which doesn't look right. Also, I added two new texareas, but they didn't seem to be functional as the first two. Overall, having a function Inside a for loop like that isn't a very neat approach, makes the code unscalable and the function hard to maintain.
A cleaner and easier approach to achieve this for multiple textareas in the document is to separate the function from the for loop.
Here is my updated counter function:
This way the function logic has been separated and can be used anywhere.
Here is the forEach loop to get all the texareas in the document and apply the counter function to them.
Now, you can add as many texareas as you want, without needing to modify the JavaScript again.
You can check it out in the codepen below, where I added two new textareas with different maxlengths:
Interesting that
progress
tag still not so easy to use for this use case that fits into purpose of element only because getting it styled properly is not so easy as it should.I initially started with the progress tag, because I wanted to stick to semantics, but unfortunately it's styling capabilities and browser inconsistencies we're just too much of a hassle. They really should make the progress element more style flexible.
It seems that simplest way to achieve that would be adopting that webkit kind of implementation as default and wait till it will get enough distribution to be considered "widespread enough". Mozilla variant is more limited, sadly.
Nice, nice.
I would probably caution people not to do this unless there's a good reason though. It can be very frustrating to find a form which asks you to enter, say, the steps that caused the problem you've had, and to not have enough room to type it all.
In most situations, your application should accept such a large amount of text that displaying a message is irrelevant.
Yeah, it most definitely isn't for all use cases. But It can be useful for a social media post, or when the information requested isn't allowed to be too lengthy.
Hello, I liked your code and recently I have been dedicating myself to studying Stimulus.js. Therefore, I decided to create a version of your code for Stimulus. For convenience, I used Tailwind CSS
I hope it can be useful to someone.