HTML5's contenteditable and oninput with Apache Wicket

Question

I need editable text in an Apache Wicket Application. As the text has to appear very "common-table-like", with editing only after the user double clicks on the text and so on, using normal TextFields is not really an option.

So I decided to go for the new HTML5 attribute contenteditable, which does the overall job quite fine. With the following markup and Java code I get a label that looks like static text, but after the user clicks inside the text is editable:

<div wicket:id="id" contenteditable></div>

...

item.add(new Label("id", "dummy content"));

But now I obviously need to catch some event when the user actually edits the text, as the new text should be stored back into the database. Online manuals suggest using oninput as it seems more reliable (e.g. with respect to timing issues) than onkeyup, onkeydown and so on.

Trying the event with regular HTML5 works fine:

<div wicket:id="id" contenteditable oninput='alert("oninput");'></div>

My question is now, how can I get the Wicket Label to support oninput? Overriding it and creating a custom label would be a perfectly fine solution (if I really have to), but for that I am too new to Wicket as to know where to start and how to create the correct markup and so on.

Answer 1

Since a div is not a form element, it doesn't get submitted when you post a form. So you have two options:

• in onInput fill a hidden form element with the content and submit that using a form
• send the content to the server using Ajax

Both require you to do some magic using a (Ajax)Behavior.

You can use Wicket's HiddenField to create the hidden field, and in onInput perform the update of the HiddenField's value.

You can encapsulate this by creating your own ContentEditableFormComponent by using FormComponentPanel as a starting point.