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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Auto tab when maxLength reached
Hi,
is there a way to implement automatic tabulation to the next field when the maxLength is reached ?
Is is often a requirement for intensive data input.
Thanks,
Daniel
Daniel Marchese: Hi,
is there a way to implement automatic tabulation to the next field when the maxLength is reached ?
Is is often a requirement for intensive data input.
Thanks,
Daniel
I have the same question? How can we implement the auto tab on textfields?
Thks
Valder
Use a TextChangeListener to listen for input and after reaching maxLength, call focus() on the next field. Note that your fields need to be immediate. Maybe there is a client-side solution but I don't know about one.
Hi Tobias,
thank you for the suggestion. I was able to implement the TextChangeListener and it works as expected.
To reduce the complexity/overhead I have limited the search for the next field to the fields of the parent only.
Unless there is a way to send a Tab key to a component server-side ?
The drawback is that with the round-trip to the server on every key pressed the screen is not very responsive.
If someone knows a client-side solution or a way to make it more responsive it will really be appreciated !
Thanks again,
Daniel
This should be doable on the client side - either with custom GWT code or Javascript - but might take a little work
You could check if the add-on Snappy can handle this - that could eliminate the need for custom client side coding.
After several hours of struggling, I finally have a solution based on JQuery.
My solution is based on the Autotabindex plugin but there are some adjustments to be done because some JQuery functions didn't work with Vaadin.
For example :
jQuery('.autotab').keyup(function (event) { ... })
doesn't seem to work and has to be replaced with :
jQuery('.autotab').live('keyup', function (event) { ... })
In this other solution based on JQuery I have also noticed that jQuery(this).next('.autotab').focus() doesn't work because it is unable to find the next field.
Daniel