聚合物进纸面罩答案

【问题标题】：Polymer paper-input mask聚合物进纸面罩
【发布时间】：2016-05-29 14:52:55
【问题描述】：

我正在为一个项目使用 Polymer (v1.4.0)，我想知道是否有任何方法可以为纸张输入添加输入掩码？

我尝试使用 jquery.inputmask 将其直接添加到纸张输入的 inputElement 但绑定和更改事件停止工作。

如果这不可能，你知道任何其他支持掩码的文本输入 Web 组件吗？

谢谢！安德烈

【问题讨论】：

标签： javascript polymer mask web-component paper-elements

【解决方案1】：

您可以使用 gold-xxx-input 元素作为模板来构建您的自定义屏蔽输入元素https://elements.polymer-project.org/elements/gold-cc-input

【讨论】：

是的，我现在正在检查这些组件。你知道是否已经有一个支持掩码的 web 组件吗？我在customelements.io 中也找不到任何内容。否则，我就去做，我只是不想重新发明轮子。
不，还没有看到支持通用掩码的。
其实paper-input确实支持屏蔽（看我的回答）。
例如，gold-cc-input 有一个掩码，其中必须添加 4 组数字，或者像 jquery.inputmask 中解释的日期输入，其中掩码定义了如何输入日期, ...
@ScottRomack 我只是建议使用该元素作为自定义掩码的起点。您可以只复制源代码并修改与掩码相关的代码。当我发布答案时，代码看起来很简单。

【解决方案2】：

是的，您可以将<paper-input> 的allowedPattern 与preventInvalidInput 一起使用。例如，这会屏蔽掉非数字输入：

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <paper-input label="enter an integer"
               prevent-invalid-input
               allowed-pattern="[\d]+"></paper-input>
</body>

^codepen

【讨论】：

这个答案不提供 jquery.inputmask 提供的相同功能。虽然您可以控制用户输入的内容，但您不能自动向文本添加字符，例如输入电话号码并为您插入破折号和空格。

【解决方案3】：

这是我在聚合物 2 和开箱即用的纸质输入中得到的结果，没有使用电话号码作为示例的自定义编码。在没有自动添加破折号(-) 的超级漂亮的情况下，有点接近掩码输入的近似值。

paper-input-mask 是需要的。

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>



  <paper-input

    auto-validate
    allowed-pattern="[0-9-]"
    pattern="\d{3}[\-]\d{3}[\-]\d{4}"
    prevent-invalid-input
    label="Mobile Phone"
    placeholder="___-___-___"

    id="phoneNumber"
    type="tel"
    disabled$=[[disabled]]
  >
  </paper-input>




</body>

【讨论】：