HTML5与Apache Wicket的可信和输入

时间:2013-10-24 10:12:21

标签: html5 wicket wicket-1.6

我需要Apache Wicket应用程序中的可编辑文本。由于文本必须看起来非常“普通表”,只有在用户双击文本后才进行编辑,依此类推,使用普通的TextFields实际上并不是一种选择。

所以我决定选择新的HTML5属性contenteditable,它可以很好地完成整个工作。使用以下标记和Java代码,我得到一个看起来像静态文本的标签,但在用户点击内部后,文本是可编辑的:

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

...

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

但是现在我显然需要在用户实际编辑文本时捕获一些事件,因为新文本应该存储回数据库。在线手册建议使用oninput,因为它似乎比onkeyuponkeydown等更可靠(例如关于时间问题)。

使用常规HTML5尝试该事件可以正常工作:

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

我现在的问题是,我如何才能获得Wicket标签以支持oninput?覆盖它并创建一个自定义标签将是一个非常好的解决方案(如果我真的必须),但为此我对Wicket来说太新了,知道从哪里开始以及如何创建正确的标记等等。

1 个答案:

答案 0 :(得分:5)

由于div不是表单元素,因此在发布表单时不会提交。所以你有两个选择:

  • onInput中填充带有内容的隐藏表单元素,并使用表单
  • 提交
  • 使用Ajax将内容发送到服务器

两者都要求你使用(Ajax)行为做一些魔术。

您可以使用Wicket的HiddenField创建隐藏字段,并在onInput中执行HiddenField值的更新。

您可以使用FormComponentPanel作为起点创建自己的ContentEditableFormComponent来封装此内容。