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.
Since a div
is not a form element, it doesn't get submitted when you post a form. So you have two options:
onInput
fill a hidden form element with the content and submit that using a formBoth 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.