Polymer 1.0 paper-input 在 type="number" 上禁用微调器

Question

我的问题与标题相同，如何在类型为数字的 Polymer 1.0 paper-input 组件上禁用微调器。

<paper-input type="number" label="Discount"></paper-input>

我想禁用 paper-input 右侧的那些箭头。

Answer 1

如果你愿意，我可以为你提供一个避难所，我认为没有办法阻止微调器出现。但我们能做的是将其设为文本并防止用户输入数字以外的任何内容。

var numberInputSel = document.querySelectorAll("paper-input.number");
for (var i = 0; i < numberInputSel.length; ++i) {
  numberInputSel[i].addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
      evt.preventDefault();
    }
  });
  numberInputSel[i].addEventListener("touchstart", function(evt) {
    this.setAttribute("type", "number")
  });
}

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

<paper-input label="Amount" value="35" class="number"></paper-input>

编辑：

我做了一点修改，现在当人们在移动设备上触摸它时，它会将类型设置为数字（意味着数字键盘显示），但在桌面上它仍然是文本。

Answer 2

paper-input[type=number] {
  --paper-input-container-input-webkit-spinner {
    display: none;
  }
}

Polymer 1.0 paper-input 在 type="number" 上禁用微调器

Polymer 1.0 paper-input disable spinner on type="number"

html

css

polymer-1.0