Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

TextField/TextArea whith label counter

Aurelien _
1 decade ago Mar 16, 2010 7:38am

Hello,

I would like to create a component that will have a TextField and a label that will count the number of characters entered by the user. This calculation is done on the client side.

I started looking for how to do this but I have some problems to implement.

Someone can give me some tracks?

In advance thank you

Aurel

Marko Grönroos
1 decade ago Mar 16, 2010 11:10am

It would be almost identical to my Client-Side Validated TextField, minus the validation. It captures input in onKeyUp() and displays the validation error in a <span> element after the text field.

See the project site for a demo and a link to the source code. It's a fairly simple extension of the TextField component. The most relevant source file would be VCSValidatedTextField.java. You wouldn't need much server-client serialization in a component with just a counter, unless you want to have some server-side API for customizing the counter (would be very useful to have reverse counter at least).

Mmm... I suppose I could consider extending my component a bit so that it could display text in the error area also in a "valid" (and partial) situation. Then, a counter would be trivial to do with a simple JavaScript validator.

A counter would also be useful for a TextArea.