2

我尝试在构建时使用 vaadin 10 构建预订表单，但遇到了问题，即我们从 te web 上的每个表单中知道的自动完成功能不起作用。我在名称字段中输入了名称，然后在下次我想重新输入名称时，我需要再次将其写出来。

我的代码看起来像这样（缩写）：

TextField name = new TextField();
Button save = new Button("submit");
save.addClickListener(event -> save());
name.setAutocomplete(Autocomplete.ON);
add(name);
add(save);

我希望 Autocomplete.On 对我有魔力，但它似乎不起作用。也许保存方法的工作方式搞砸了？

方法比较大，我只是简化一下

private void save() {
  --save everything to db
  --remove all fields
  --replace the fields with text saying reservation done
}
4

2 回答 2

1

发现有人创建了问题https://github.com/vaadin/vaadin-text-field/issues/156

似乎是 Shadow DOM 限制

相关问题：

https://bugs.chromium.org/p/chromium/issues/detail?id=746593

https://bugs.webkit.org/show_bug.cgi?id=172567

编辑：

对于我的 loginForm 的自动完成，我可以使用添加

class xyz extends Div implements PageConfigurator{

...

@Override
public void configurePage(InitialPageSettings settings) {
    settings.addInlineWithContents(
    InitialPageSettings.Position.PREPEND,
    "window.customElements=window.customElements||{}; 
     window.customElements.forcePolyfill=true; 
     window.ShadyDOM={force:true};", 
     InitialPageSettings.WrapMode.JAVASCRIPT);
}
于 2018-12-09T01:13:56.590 回答
0

我最近在 Vaadin 14 和自定义登录表单中遇到了这个问题。如果 Chrome 可以在 Light DOM 中看到具有名称属性的输入标签，Chrome 只会提供自动填充字段（并保存登录详细信息），但 Vaadin 创建的 TextFields 的所有元素都隐藏在 Shadow DOM 中。

<input slot="input">解决方案是在父级内部创建一个引用<vaadin-text-field>作为 Light DOM 的一部分。所有样式和所有内容仍将在 Shadow DOM 中，但 Chrome 现在可以看到自动完成的输入字段。

科特林代码：

val username = TextField().apply {
        element.setAttribute("name", "username")
        element.appendChild(Element("input").setAttribute("slot", "input"))
}
val password = PasswordField().apply {
        element.setAttribute("name", "password")
        element.appendChild(Element("input").setAttribute("slot", "input"))
}
add(username, password)
于 2020-01-05T03:35:03.330 回答