Auto tab when maxLength reached

Vaadin 6 / 7 / 8 Framework UI
1

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

2

I have the same question? How can we implement the auto tab on textfields?

Thks

Valder

3

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.

4

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

5

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.

6

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