CODEWITHSUNDEEP
htmlcsspolymer-1.0
fr1sk
fr1sk

Reputation: 321

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.

Upvotes: 1

Views: 554

Answers (2)

mindon
mindon

Reputation: 473

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

Upvotes: 1

Andrew Bone
Andrew Bone

Reputation: 7291

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.

Upvotes: 1

Related Questions