dart - 表单中带有 type="submit" 的纸质按钮不提交？

Question

我正在尝试使用paper-button属性type设置为submit（就像对button元素所做的那样）来提交封闭form，但由于某种原因它无法提交表单。这是错误还是功能？

如何paper-button提交表单？

PS：我在飞镖领域（不是js）。

score 7 · Accepted Answer

正如 Gunter 所指出的，您可以创建一个自定义元素，以您想要的语义扩展一些本机元素。

我也遇到了你的问题，我创建了简单的元素，可以提交给paper-button

<polymer-element name="paper-button-submit" extends="button" noscript>
  <template>
    <style>
      :host {
        border: 0;
        background: transparent;
        padding: 0;
        font-size: inherit;
      }
    </style>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</polymer-element>

然后你可以写这个

<button type="submit" is="paper-button-submit">Add</button>

会得到一个像纸一样的按钮

score 7 · Accepted Answer

您可以通过在 paper-button 元素内放置一个本机按钮来实现表单提交：

<paper-button>
  <button>Sign Up</button>
</paper-button>

然后使用以下 CSS 隐藏本机按钮，同时确保它的命中区填充整个纸按钮元素：

<style shim-shadowdom>
  paper-button {
    padding:0;
  }
  paper-button::shadow .button-content {
    padding:0;
  }
  paper-button button {
    padding:1em;
    background-color: transparent;
    border-color: transparent;
  }
  paper-button button::-moz-focus-inner {
    border: 0;
  }
</style>

score 6 · Accepted Answer

在 Polymer Google 小组中已经讨论过在表单中使用包含表单元素的 Polymer 元素，据我所知，我在 SO 上回答了一个类似的问题（之后我会做一些研究）。

1）您可以扩展输入元素

<polymer-element name="my-element" extends="input">
   ...
</polymer-element>

并像使用它一样

<input is="my-element">

2）您可以在自定义代码中进行表单处理
（从表单元素中读取值并创建 AJAX 调用以将数据发送到服务器）

3）创建一个自定义表单元素（扩展第二个）
，它执行表单处理和 AJAX 调用

第一个选项不适用于核心元素/纸张元素，因为它不扩展<input>（或任何其他表单元素）而是嵌入它。这适用于表单输入元素，也适用于表单提交按钮。

一些或多或少相关的话题

如果只有提交按钮是 Polymer 元素，您可以执行的操作是click()在单击处理程序中的不可见（非 Polymer）提交按钮上调用该方法以<paper-button> 获取更多详细信息，请参阅
- Polymer：手动提交表单

score 4 · Accepted Answer

无需创建自定义元素。根据文档，建议使用以下方法：

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('form').submit();
}

所以您只需将onclick事件绑定到手动提交表单的函数。

更新

尽管前面的示例iron-form使用了onclick事件，但建议使用on-tapover on-click：

提示：使用on-tap而不是on-click用于在触摸（移动）和单击（桌面）设备上一致触发的事件。

使用 Polymers自己的 DOM API也是一个好主意：

function submitForm(e) {
  Polymer.dom(e).localTarget.parentElement.submit();
}

dart - 表单中带有 type="submit" 的纸质按钮不提交？

4 回答 4

一些或多或少相关的话题

Related

Reference