聚合物纸输入掩模-Java 学习之路

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

我试图使用jquery.inputmask将它直接添加到paper-input的inputElement，但随后绑定和更改事件停止工作 .

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

谢谢！安德烈

3 回答

3

您可以使用gold-xxx-input元素作为模板如何构建自定义蒙版输入元素https://elements.polymer-project.org/elements/gold-cc-input

回复于 2024-04-30T13:33:41+08:00

是的，你可以使用 <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

回复于 2024-04-30T13:33:41+08:00

这是我在聚合物2和开箱即用的纸张输入中得到的结果，没有使用电话号码的自定义编码作为示例 . 掩盖输入的近似近似，没有自动添加短划线（ - ）的超级好处 .

纸输入掩码是需要的东西 .

<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>

回复于 2024-04-30T13:33:41+08:00

聚合物纸输入掩模

3 回答

相关问题