fr1sk fr1sk - 4 months ago 33
CSS Question

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

My question is same as the title, how to disable spinner on polymer 1.0 paper-input component where the type is number.

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


enter image description here

I want to disable those arrows on the right side of paper-input.

Answer

I can offer you a bodge if you like, I don't think there is a way to stop the spinner coming up. But what we can do is make it text and prevent the user from inputting anything but numbers.

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>

EDIT:

I've made a slight edit, now when people touch it on mobile it will set the type as number (meaning the numeric keyboard shows) but on desktop it stays as text.

Comments