Polymer：如何让 maxlength 使用纸张输入，而不是 "iron-input"

Question

我已经开始尝试在我们的站点中学习和使用 Polymer 元素。我只需要允许用户在一年内输入 4 个数字，所以我想在我的纸质输入中有一个 maxlength="4"，但它不起作用并且一直超过我的最大长度限制。

<paper-input floatingLabel label="Please add the year in the format YYYY" name="birth_date" type="number" maxlength="4" char-counter error-message="numbers only"></paper-input>

但是，当我将 paper-input-container 中的示例与 maxlength="4" 放在一起时：

<paper-input-container>
  <label>Your name</label>
  <input is="iron-input" maxlength="4">
</paper-input-container>

这似乎在我的最大长度处停止了输入，但它也使用了比我想使用的更多的代码，因为我有相当多的表单问题要问用户，而且事实上我查看了文档和示例，但不明白为什么我的 maxlength 在 <paper-input> 中不起作用。 paper-inputs 是我遗漏了什么还是我用错了？

此外，如果有人知道使用聚合物元素进行表单验证的任何好的指南，也将不胜感激。对于我的问题，非常感谢任何建议。

Answer 1

对于type="number"，可以设置属性max和min。要允许用户仅输入 4 个字符，您可以设置 type="string"，然后使用自动验证模式属性.

验证是否输入了数字

<paper-input label="only type numbers (auto-validate)" auto-validate pattern="[0-9]*" error-message="numbers only!" type="string" maxlength="4"></paper-input>

我发现纸张输入的演示示例 here 对故障排除很有用。

Polymer：如何让 maxlength 使用纸张输入，而不是 "iron-input"

Polymer: How to get maxlength working with paper-input, as opposed to "iron-input"

html

forms

attributes

polymer-1.0