html - 您如何获取 HTML5 输入以验证它们是否在 Polymer Web Components 中？

Question

我正在使用 Polymer Web Components，我的应用程序以 Chrome 为目标。在我的表单上，在 Web 组件之外，我有一个输入类型 ='number'，当我在输入中输入 'a' 并提交表单时，我得到一个工具提示，上面写着“请输入一个数字。”

但是，我在 Web 组件的 Shadow DOM 中有另一个 input type="number"。当我在该字段中输入“a”并提交表单时，我没有得到工具提示。有没有办法让行为更一致？

Answer 1

我没有看到您描述的相同问题(使用 Chrome 36 和 Polymer 0.3.3)。使用以下简单的 Polymer 元素 ( jsbin)，表单验证按预期工作:

<polymer-element name="test-element" noscript>
  <template>
    <form>
      <label>Inside the element:</label>
      <input type="number" placeholder="Numbers only!">
      <input type="submit">
    </form>
  </template>
</polymer-element>

编辑:在您展示的示例中，您的主机页面的 <form>与 Polymer 元素的 <input> 分开由于 shadow DOM边界。您以这种方式构建事物有什么原因吗？

它看起来不像任何 <input>存在于 shadow DOM 中的 s 实际上是与 light DOM 一起提交的 <form> ，所以他们没有被验证的事实在某种意义上是意料之中的，也是你最不关心的。 (查看 this example 的网络跟踪，您会发现只有 test=1234 被提交。)

采用上面示例中的方法并包括 <form> Polymer 元素中的 . 足以获得现代浏览器提供的预期验证行为。或者，如果您真正想要的是 <template>而且你不需要一个完整的 polymer 元素，你可以按照 ( jsbin ) 的方式做一些事情:

<form>
  <template is="auto-binding">
    <label>Inside the element:</label>
    <input type="number" placeholder="Numbers only!" value="{{myNumber}}">
  </template>
  <input type="submit">
</form>
<script>
  document.querySelector('template').myNumber = 34;
</script>

这也行得通，因为一旦 <template>绑定(bind)后，内容会像任何其他元素一样直接添加到页面的 DOM。

如果您强烈认为您不能按照描述重构您的代码，那么我认为您需要通过针对有问题的网络浏览器的错误来解决您的问题，看看他们是否愿意开始考虑 <input>影子 DOM 中的元素作为光 DOM 的一部分 <form> .